简单的CSS3鼠标滑过图片标题和遮罩层动画特效

此文转自：http://www.cnblogs.com/w2bc/p/5735300.html，仅供本人学习参考，版权归原做者全部！

 

这是一款使用CSS3制做的简单的鼠标滑过图片标题和遮罩层动画特效。该鼠标滑过特效经过 CSS3transitions 和 transform 属性，在鼠标滑过图片时制做遮罩层和图片标题动画效果。

在线预览    源码下载

 使用方法

 HTML结构

该鼠标滑过图片特效的HTML结构很是简单：使用一个<div>元素做为图片遮罩层，在里面放置图片的描述信息。

1 2 3 4 5 6 7 8

< img  src = "img/01.jpg"  alt = "" > < div  class = "caption" >    < div  class = "blur" ></ div >    < div  class = "caption-text" >      < h1 >图片标题</ h1 >      < p >描述信息</ p >    </ div > </ div >

 CSS样式

第一个DEMO使用透明度opacity属性来制做遮罩层的导入效果，并经过transition来制做平滑过渡动画。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

.caption-style -1  li{    float : left ;    padding : 0px ;    position : relative ;    overflow : hidden ; }   .caption-style -1  li:hover . caption {    opacity: 1 ;   } .caption-style -1  img{    margin : 0px ;    padding : 0px ;    float : left ;    z-index : 4 ; }     .caption-style -1  . caption {    cursor : pointer ;    position : absolute ;    opacity: 0 ;    -webkit-transition: all  0.45 s ease-in-out;    -moz-transition: all  0.45 s ease-in-out;    -o-transition: all  0.45 s ease-in-out;    -ms-transition: all  0.45 s ease-in-out;    transition: all  0.45 s ease-in-out;   } .caption-style -1  .blur{    background-color : rgba( 0 , 0 , 0 , 0.65 );    height : 300px ;    width : 400px ;    z-index : 5 ;    position : absolute ; }   .caption-style -1  .caption-text h 1 {    text-transform : uppercase ;    font-size : 24px ; } .caption-style -1  .caption-text{    z-index : 10 ;    color : #fff ;    position : absolute ;    width : 400px ;    height : 300px ;    text-align : center ;    top : 100px ; }

其它效果的制做也很是简单，具体请参考下载的源文件。

在线预览    源码下载