首页>>焦点图>>CSS3鼠标悬停图片遮罩层变形动画特效(2025-04-16)

CSS3鼠标悬停图片遮罩层变形动画特效

CSS3鼠标悬停图片遮罩层变形动画特效
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="demo">  
  2.             <div class="container">  
  3.                 <div class="row">  
  4.                     <div class="col-md-4 col-sm-6">  
  5.                         <div class="box">  
  6.                             <img  src="images/img-1.jpg">  
  7.                             <div class="box-content">  
  8.                                 <h3 class="title">Williamson</h3>  
  9.                                 <span class="post">Web designer</span>  
  10.                             </div>  
  11.                             <ul class="icon">  
  12.                                 <li><a href="#"><i class="fa fa-search"></i></a></li>  
  13.                                 <li><a href="#"><i class="fa fa-link"></i></a></li>  
  14.                             </ul>  
  15.                         </div>  
  16.                     </div>  
  17.                     <div class="col-md-4 col-sm-6">  
  18.                         <div class="box">  
  19.                             <img  src="images/img-2.jpg">  
  20.                             <div class="box-content">  
  21.                                 <h3 class="title">Miranda Roy</h3>  
  22.                                 <span class="post">Web developer</span>  
  23.                             </div>  
  24.                             <ul class="icon">  
  25.                                 <li><a href="#"><i class="fa fa-search"></i></a></li>  
  26.                                 <li><a href="#"><i class="fa fa-link"></i></a></li>  
  27.                             </ul>  
  28.                         </div>  
  29.                     </div>  
  30.                     <div class="col-md-4 col-sm-6">  
  31.                         <div class="box">  
  32.                             <img  src="images/img-3.jpg">  
  33.                             <div class="box-content">  
  34.                                 <h3 class="title">Steve Thomas</h3>  
  35.                                 <span class="post">Web developer</span>  
  36.                             </div>  
  37.                             <ul class="icon">  
  38.                                 <li><a href="#"><i class="fa fa-search"></i></a></li>  
  39.                                 <li><a href="#"><i class="fa fa-link"></i></a></li>  
  40.                             </ul>  
  41.                         </div>  
  42.                     </div>  
  43.                 </div>  
  44.             </div>  
  45.         </div>  
  46.           

 


原文地址:http://www.freejs.net/article_jiaodiantu_956.html