در این مطلب نمونه 2 برای هاور بر تصاویر با عنوان CSS Image Hover رو در اختیارتون قرار میدم. امیدوارم که بتونین از اون ایده بگیرید و یا اینکه از اون در سایتتون استفاده کنید.
کد HTML :
<h2 id = "demo02" > 2. Zoom In #2 </h2>
<div class = "hover02 column" >
<div>
<figure> <img src = "pic01.jpg" /> </figure>
<span> Hover </span>
</div>
<div>
<figure> <img src = "pic02.jpg" /> </figure>
<span> Hover </span>
</div>
<div>
<figure> <img src = "pic03.jpg" /> </figure>
<span> Hover </span>
</div>
</div>
کد CSS :
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
body {
color : #333 ;
font-family : 'Open Sans' , sans-serif ;
font-weight : 300 ;
}
h1,
h1+p {
margin : 30px 15px 0 ;
font-weight : 300 ;
}
h1+p a {
color : #333 ;
}
h1+p a:hover {
text-decoration : none ;
}
h2 {
margin : 60px 15px 0 ;
padding : 0 ;
font-weight : 300 ;
}
h2 span {
margin-left : 1em ;
color : #aaa ;
font-size : 85% ;
}
.column {
margin : 15px 15px 0 ;
padding : 0 ;
}
.column:last-child {
padding-bottom : 60px ;
}
.column::after {
content : '' ;
clear : both ;
display : block ;
}
.column div {
position : relative ;
float : left ;
width : 300px ;
height : 200px ;
margin : 0 0 0 25px ;
padding : 0 ;
}
.column div:first-child {
margin-left : 0 ;
}
.column div span {
position : absolute ;
bottom : -20px ;
left : 0 ;
z-index : -1 ;
display : block ;
width : 300px ;
margin : 0 ;
padding : 0 ;
color : #444 ;
font-size : 18px ;
text-decoration : none ;
text-align : center ;
-webkit-transition : .3s ease-in-out ;
transition : .3s ease-in-out ;
opacity : 0 ;
}
figure {
width : 300px ;
height : 200px ;
margin : 0 ;
padding : 0 ;
background : #fff ;
overflow : hidden ;
}
figure:hover+span {
bottom : -36px ;
opacity : 1 ;
}
/* Zoom In #2 */
.hover02 figure img {
width : 300px ;
height : auto ;
-webkit-transition : .3s ease-in-out ;
transition : .3s ease-in-out ;
}
.hover02 figure:hover img {
width : 350px ;
}
امیدوارم خوشتون بیاد.
موفق باشید. یا علی
Source
سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال میکنید
برچسب: نویسنده: استخدام کار بازدید: 297 تاريخ: يکشنبه 26 ارديبهشت 1395 ساعت: 4:15