此文轉自：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
;
}
|
其它效果的制作也非常簡單，具體請參考下載的源文件。