前兩天接了一個zblog主題定制，其中分類列表中的圖片都需要如上圖的特效，在鼠標觸發(fā)文章縮略圖時候，會懸浮顯示一層特效，線條動態(tài)顯示，下面記錄下這段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的特效兼容性更好！