Image hover effect (2)

Posted on by Roy Chan

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; 
}

發表迴響