當你制作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; } |