纯CSS3实现8组超炫酷鼠标滑过图片动画

这是一款效果超酷的纯CSS3鼠标滑过图片动画效果，它共分为8组不同的效果，它们分别在鼠标滑过图片时，以不同的方式显示遮罩层和图片标题。每一组效果又分为3种不同的鼠标滑过图片效果。

这些鼠标滑过图片时的动画效果都是使用CSS3来完成的，分别有：滑动效果，倾斜效果，翻转效果，旋转效果等等，下面是一张GIF的预览图片。

在线预览    源码下载

使用方法

在页面中引入hover-effects.css文件。

1. "stylesheet" href="css/hover-effects.css" />              

HTML结构

以其中一种鼠标滑过图片动画效果为例，它的HTML结构如下：

1. <div class="effect-1">  
2.    <div class="image-box">  
3.       <img src="img-2.jpg" alt="Image-3">  
4.    div>  
5.    <div class="text-desc">  
6.       <h3>Your Titleh3>  
7.       <p>......p>  
8.       <a href="#" class="btn">Learn morea>  
9.    div>  
10. div>              

CSS样式

1. .effect-1{   
2.   float: left;    
3.   width: 340px;    
4.   position: relative;    
5.   overflow: hidden;    
6.   text-align: center;    
7.   border: 4px solid rgba(255, 255, 255, 0.9);    
8.   overflow: visible;   
9. }   
10. .effect-1 img{   
11.   transition: 0.5s;   
12. }   
13. .effect-1:hover img{   
14.   transform: scale(0.3) translateY(-110%);   
15.   position: relative;    
16.   z-index: 9;   
17. } .effect-1 .text-desc{   
18.   transform: translateY(100%);    
19.   opacity: 0;    
20.   padding: 85px 20px 10px;    
21.   transition: 0.5s;   
22. } .effect-1:hover .text-desc{   
23.   transform: translateY(0px);    
24.   opacity: 1;   
25. }     
26.   

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/w2bc/p/5279180.html