首页>>Jquery图片>>CSS鼠标悬停卡片反转效果(2020-05-26)

CSS鼠标悬停卡片反转效果

CSS鼠标悬停卡片反转效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="main">  
  2.    <ul>  
  3.        <li> <img src="img/1a.jpg" alt="Iron Man 1" width="300" height="450" />  
  4.           <div class="info">  
  5.              <h2>Iron Man 1</h2>  
  6.              <p>freejs.net</p>  
  7.              <a href="#">More info</a>  
  8.           </div>  
  9.        </li>  
  10.        <li> <img src="img/1b.jpg" alt="Iron Man 2" width="300" height="450" />  
  11.           <div class="info">  
  12.              <h2>Iron Man 2</h2>  
  13.              <p>freejs.net</p>  
  14.              <a href="#">More info</a>  
  15.           </div>  
  16.        </li>  
  17.    </ul>  
  18. </div>  

 

CSS Code
  1. *{margin:0;padding:0;font-family:"Arial";}  
  2. body{background:#222222}  
  3. #main{width:962px;height:473px;margin:10px auto;}  
  4. #main ul{list-style:none;}  
  5. #main ul li{width:320px;height:470px;float:left;position:relative;}  
  6. #main ul li img{border:10px solid #F5F5F5;-webkit-transition:1s ease;-moz-transition:1s ease;}  
  7. #main .info{width:240px;height:230px;border:10px solid #F5F5F5;background:#deddcd;position:absolute;bottombottom:-50px;rightright:0;-webkit-transition:1s ease;-moz-transition:1s ease;-moz-transform:rotatey(30deg);-webkit-transform:rotatey(30deg);}  
  8. #main .info h2{text-align:center;line-height:70px;color:#7a3f3a;font-weight:normal;font-size:20px;}  
  9. #main .info p{padding:0 20px;font-size:14px;}  
  10. #main .info a{display:block;width:100px;height:30px;background:#7a3f3a;color:#FFF;border-radius:5px;text-decoration:none;text-align:center;line-height:30px;margin:10px auto;}  
  11.   
  12. #main ul li:hover .info{-webkit-transform:rotatey(0deg);-moz-transform:rotatey(0deg);rightright:30px;bottombottom:-70px;}  
  13. #main ul li:hover img{-webkit-transform:rotatey(360deg);-moz-transform:rotatey(360deg);}  

 


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