简单的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.45s ease-in-out;   -moz-transition:all 0.45s ease-in-out;   -o-transition:all 0.45s ease-in-out;   -ms-transition:all 0.45s ease-in-out;   transition:all 0.45s 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 h1{   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; }

其它效果的制作也非常简单，具体请参考下载的源文件。

在线预览   源码下载