Image hover effect (1)

Posted on by Roy Chan

image hovering effect 1
 

要增加網頁的吸引力，在圖片上加入一些互動的訊息 ，最常用到的屬性就是hover這功能。簡單來說，hover是在控制當滑鼠移至某元件時，某元件該如何反應。

用HTML5先設置一張圖片及hover的背景及文字 :

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="image-style-one">							
	<!-- Image -->							
	<img class="img-responsive" src="media/image3.jpg"  alt="sample image" />							
	<!-- image hover style for image #1 -->							
	<div class="image-hover">							
	    <!-- Image Caption -->							
	    <div class="image-caption">
                <!-- Paragraph -->							
		<p>Suitable for Webpage Design</p>							
		<a href="#" ><i class="fa fa-search"></i></a>	 							
	    </div>							
	</div>							
</div>

 
要産生hover的效果，需要使用以下的技巧和css屬性：
 

技巧一
使用position的屬性把圖片和hover背景及文字重疊 ：

1
2
3
4
5
6
7
8

.image-style-one {
        position: relative;
}
.image-style-one .image-hover {
	position: absolute;
	top: 0;
	left: 0;
}

 

技巧二
使用opacity的屬性把hover背景及文字在網頁中隱藏 :

1
2
3

.image-style-one .image-hover {
	opacity: 0;
}

 

技巧三
使用:hover的語法，當滑鼠移至圖片時，hover背景及文字便會顯現出來：

1
2
3

.image-style-one:hover .image-hover {
	opacity: 1;
}

 

技巧四
使用transform和transition的屬性産生出hover時圖片旋轉的特效 :

1
2
3
4
5
6

.image-style-one .image-hover {
	transition: all 0.5s ease;
}
.image-style-one:hover img{
	transform: scale(1.2) rotate(8deg);
}

 

你把滑鼠移至以下圖片，便會見到hover的效果 ：


 

css style的完整源碼如下 ：

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

.image-style-one {
        position: relative;
	overflow: hidden;
        width:300px;
}
.image-style-one img {
	border-radius: 3px;
        width:100%;
	-webkit-transition: all 2s ease;
        -moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}
.image-style-one .image-hover {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	border-radius: 3px;
	opacity: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.image-style-one:hover .image-hover {
	opacity: 1;
}
.image-style-one:hover img{
	-webkit-transform: scale(1.2) rotate(8deg);
	-moz-transform: scale(1.2) rotate(8deg);
        -ms-transform: scale(1.2) rotate(8deg);
	-o-transform: scale(1.2) rotate(8deg);
	transform: scale(1.2) rotate(8deg);
}
.image-style-one  .image-caption {
	margin-top: 12%;
	text-align: center;
}
.image-style-one  .image-caption h4 {
	color: #fff;
	margin-bottom:0px;
}
.image-style-one .image-caption p{
        font-size:20px;
	max-width:75%;
	margin:0px auto;
	color:rgba(255,255,255,0.8);
	line-height:23px;
	margin-bottom:5px;
}
.image-style-one .image-caption a{
	display:inline-block;
	width:50px;
	height:50px;
	text-align:center;
        background:#1693A5;
	color:#fff;
	border-radius:100%;
	line-height:50px;
}

2 thoughts on “Image hover effect (1)”

  1. Substantially, the post is in reality the greatest on that deserving topic. I concur with your conclusions and will certainly eagerly look forward to your future updates. Saying thanks definitely will not simply be adequate, for the exceptional clarity in your writing. I can without delay grab your rss feed to stay abreast of any kind of updates. Pleasant work and much success in your business dealings!

    回覆

發表迴響