Image hover effect (2)

image hover effect 2

當你制作ecommerce網站時,在產品的圖片上加入一個hover button,便可以產生簡單的互動感覺和增加產品的吸引力。這個範例是一個從左邊彈出來的hover button,制作方法很簡單。

用HTML5先設置一張圖片及hover button的外觀及文字 :

1
2
3
4
5
6
7
8
<div class="image-style-one">							
    <!-- Image -->							
    <img class="img-responsive" src="media/image2.jpg"  alt="sample image" />												
    <!-- hover button -->							
    <div class="hover-button">																	
	<a href="#"><i class="fa fa-heart fa-2x"></i></a>									
    </div>											
</div>

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

技巧一
使用position, overflow和left的屬性把hover button隱藏在圖片的左方 :

1
2
3
4
5
6
7
8
9
10
.image-style-one {
   position: relative;	
   overflow: hidden;
   Width:300px;
}
.image-style-one .hover-button { 
   z-index: 10;
   position: absolute;
   left: -110px;
}

技巧二
使用:hover的語法和left的屬性,當滑鼠移至圖片時,hover button便會從左邊走出來:

1
2
3
.image-style-one:hover .hover-button { 
   left: 0px; 
}

技巧三
使用transition的屬性産生出hover button慢慢走出來效果 :

1
2
3
.image-style-one .hover-button { 
   transition: all 0.4s ease-in-out;
}

你把滑鼠移至以下圖片,便會見到hover button的效果 :


其實大部分的網上商品模板都有預設的hover button,但如果你明白它的制作原理,便可以更改css的屬性做出自己喜愛的外觀和效果。

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
/* Image style #1 */
.image-style-one {
   position: relative;	
   overflow: hidden;
   Width:300px;
}
 
.image-style-one img {
   border-radius: 3px;
   width:100%;
}
 
.image-style-one .hover-button a{
   float:right;
   margin-right:20px;
   color:#fff;  
}
 
.image-style-one .hover-button { 
   z-index: 10;
   position: absolute;
   left: -110px;
   opacity:0.7;
   bottom: 40%;
   width: 110px;
   height: 45px;
   line-height: 35px;  
   padding-top:10px;
   background: #1693A5; 
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
 
.image-style-one:hover .hover-button { 
   left: 0px; 
}

發表迴響