首页>>Jquery文字>>8款纯CSS鼠标滑过图片动画(2016-07-25)

8款纯CSS鼠标滑过图片动画

8款纯CSS鼠标滑过图片动画
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <h2><span>Effects 1</span></h2>  
  2.         <ul>  
  3.             <li>  
  4.                 <div class="port-1 effect-1">  
  5.                     <div class="image-box">  
  6.                         <img src="images/img-1.jpg" alt="Image-1">  
  7.                     </div>  
  8.                     <div class="text-desc">  
  9.                         <h3>Your Title</h3>  
  10.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
  11.                         <a href="" class="btn">Learn more</a>  
  12.                     </div>  
  13.                 </div>  
  14.             </li>  
  15.             <li>  
  16.                 <div class="port-1 effect-2">  
  17.                     <div class="image-box">  
  18.                         <img src="images/img-1.jpg" alt="Image-2">  
  19.                     </div>  
  20.                     <div class="text-desc">  
  21.                         <h3>Your Title</h3>  
  22.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
  23.                         <a href="" class="btn">Learn more</a>  
  24.                     </div>  
  25.                 </div>  
  26.             </li>  
  27.             <li>  
  28.                 <div class="port-1 effect-3">  
  29.                     <div class="image-box">  
  30.                         <img src="images/img-1.jpg" alt="Image-3">  
  31.                     </div>  
  32.                     <div class="text-desc">  
  33.                         <h3>Your Title</h3>  
  34.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
  35.                         <a href="" class="btn">Learn more</a>  
  36.                     </div>  
  37.                 </div>  
  38.             </li>  
  39.         </ul>  

 


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