此文转自：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
;
}
|
其它效果的制作也非常简单，具体请参考下载的源文件。