[share] Cái code tương tác ảnh

[IIluffyII]

Demo: http://havanqui5.forumvi.com/h40-page

Code:

<style>.Slidebox{ float:center; } .cover { position: relative; width: 590px; height: 282px; margin: 20px auto; background-color: #f7f7f7; z-index: 1; padding: 10px; -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3); -mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3); box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .left_gate{ position: absolute; background: #DBDCDE; bottom: 0; right: 50%; left: 0; top: 0; border:1px solid #F0F0F0; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition: all 0.5s ease-out; } .cover:hover .left_gate{ right: 100%; left: -50%; } .right_gate{ position: absolute; background: #DBDCDE; bottom: 0; left: 50%; right: 0; top: 0; border:1px solid #F0F0F0; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .cover:hover .right_gate{ left: 100%; right: -50%; }.slide_in { overflow: hidden; } .slide_in .left_gate { background: url(http://3.bp.blogspot.com/-PdoCkxEiWa8/UWkFWUyQ57I/AAAAAAAACbM/sdBaHJgiBZk/s320/right+gate.png)#DBDCDE; border:1px solid #F0F0F0; } .slide_in .right_gate { background: url(http://4.bp.blogspot.com/-7Iu4ZEl25nw/UWkFWQhp_4I/AAAAAAAACbI/LBI6YLMU1hk/s1600/left+gate.png)#DBDCDE; border:1px solid #F0F0F0; } .cover img { margin-top: 15px; }</style><div class="Slidebox"><div class="cover slide_in"><div class="left_gate"></div><div class="right_gate"></div>Your CONTENT TEXT GOES HERE</div>

Hãy cho thêm ý tưởng zo nhé..mình chỉ làm thế thôi @@
Nguồn : yu-kun ^^!

[thanh2010]

hay

[Ocean Sapphire]

đẹp đấy, like  
test thử xem thế nào

[Lùn Lì Lợm]

đẹp
vote

[Sponsored content]