前两天接了一个zblog主题定制，其中分类列表中的图片都需要如上图的特效，在鼠标触发文章缩略图时候，会悬浮显示一层特效，线条动态显示，下面记录下这段HTML和CSS：
首先是HTML：
<divclass="list"><ul><li><divclass="img"><ahref="{$article.Url}"><imgsrc="{yddz_thumbnail($article)"alt="{$article.Title}"><divclass="img_active"></div><p>MOREEXCITING</p></a></div></li></ul></div>
CSS：
.listli{padding-bottom:17px;width:100%;height:auto;padding-bottom:17px;margin-top:17px;border-bottom:1pxsolid#E5E5E5;overflow:hidden;}.list.img{float:left;width:220px;height:150px;line-height:150px;background:#68838B;overflow:hidden;position:relative;}.list.imgimg{width:100%;height:100%;object-fit:cover;overflow:hidden;}.list.img:hoverimg{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:opacity0.35s,-webkit-transform0.35s;transition:opacity0.35s,transform0.35s;}.list.img.img_active::before{border-top:1pxsolid#fff;border-bottom:1pxsolid#fff;-webkit-transform:scale(0,1);transform:scale(0,1);}.list.img.img_active::after{border-left:1pxsolid#fff;border-right:1pxsolid#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.imgp{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:hoverp{display:block;}
这种特效目前在网络上很多，都可以直接搜到，很多使用jquery的特效兼容性更好！
