前两天接了一个zblog主题定制，其中分类列表中的图片都需要如上图的特效，在鼠标触发文章缩略图时候，会悬浮显示一层特效，线条动态显示，下面记录下这段HTML和CSS：
首先是HTML：
<div class="list">
<ul>
<li>
<div class="img">
<a href="{$article.Url}">
<img src="{yddz_thumbnail($article)" alt="{$article.Title}">
<div class="img_active"></div>
<p>MORE EXCITING</p>
</a>
</div>
</li>
</ul>
</div>CSS：
.list li{padding-bottom: 17px;width: 100%;height: auto;padding-bottom: 17px;margin-top: 17px;border-bottom: 1px solid #E5E5E5;overflow: hidden;}
.list .img{float: left;width: 220px;height: 150px;line-height: 150px;background: #68838B; overflow: hidden;position: relative;}
.list .img img{width: 100%;height: 100%;object-fit: cover;overflow: hidden;}
.list .img:hover img{opacity: 0.8;}
.list .img .img_active{width: 100%;height: 100%;position: absolute;top: 0;left: 0;
-webkit-backface-visibility: hidden;backface-visibility: hidden;
color: #fff;font-size: 1.26em;text-transform: uppercase;}
.list .img .img_active::before, .list .img .img_active::after {
position: absolute;top: 20px;bottom: 20px;left: 20px;right: 20px;
content: '';opacity: 0;pointer-events: none;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;}
.list .img .img_active::before {
border-top: 1px solid #fff;border-bottom: 1px solid #fff;-webkit-transform: scale(0, 1);transform: scale(0, 1);}
.list .img .img_active::after {
border-left: 1px solid #fff;border-right: 1px solid #fff;-webkit-transform: scale(1, 0);transform: scale(1, 0);}
.list .img:hover .img_active::before, .list .img:hover .img_active::after {
-webkit-transform: scale(1);transform: scale(1);opacity: 1;}
.list .img p{ display: none; position: absolute;left: 0;top: 0;right: 0;bottom: 0;text-align: center;vertical-align: middle;color: #fff;font-size: 18px;}
.list .img:hover p{display: block;}这种特效目前在网络上很多，都可以直接搜到，很多使用jquery的特效兼容性更好！