Image Hover Effects

Cara Pembuatan nya sebagai berikut:

1. Login
2. Setelah masuk pada halaman dasbor pilih rancangan
3. Klik edit Html
4. Centang expad widget dan cari kode ]]></b:skin>agar pencarian kode lebih cepat tekan Ctrl+F atau F3
5. Salin Kode Css di bawah ini dan letakkan di atas kode yang anda cari tadi

<style type="text/css"> body{ font: 14px/150% "Arial", Verdana, sans-serif; text-align:center; background:#111; color:#fff; } h1, h2, h3{margin:20px 0;text-align:center;color:#fff;} a{ text-decoration:none; color:#0080ea; } #container{ margin:0 auto; text-align:left; width:760px; } h2{ background:#aaa; padding:10px; text-shadow:1px 1px 1px #555; color:#fff; } p.aligncenter{text-align:center;} br{clear:both;height:1px;display:block;line-height:1px;} .demobox{ float:left; margin:20px; width:200px; height:300px; border:2px solid #555; overflow:hidden; } .details{ width:200px; height:300px; background:#000; color:#fff; text-align:center; } #demo-1 img { -webkit-transform: scale(1); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; } #demo-1 img:hover{ -webkit-transform: scale(.5); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; } #demo-2 img { opacity: 1; -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; } #demo-2 img:hover{ opacity: .5; -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; } #demo-3{position:relative;} #demo-3 img{ opacity:1 -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; } #demo-3 .details{ position:absolute; top:0; left:0; opacity: 0; -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; } #demo-3 .details:hover{ opacity: .9; -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; } #demo-4{position:relative;} #demo-4 img{ position:absolute; top:0; left:0; -webkit-transition: margin-left; -webkit-transition-timing-function: ease-in; -webkit-transition-duration: 250ms; } #demo-4:hover img{ margin-left:200px; } #demo-4 .details{ position:absolute; top:0; left:0; z-index:-1; } #demo-5{position:relative;} #demo-5 .details{ opacity: .9; position:absolute; top:0; left:0; margin-left:-200px; -webkit-transition: margin-left; -webkit-transition-timing-function: ease-in; -webkit-transition-duration: 250ms; } #demo-5:hover .details{ margin-left:0; } #demo-6{ position:relative; } #demo-6 img{ position:absolute; top:0; left:0; z-index:0; } #demo-6 .details{ opacity: .9; position:absolute; top:100; left:150; z-index:999; -webkit-transform: scale(0); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 250ms; } #demo-6:hover .details{ -webkit-transform: scale(1); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 250ms; } </style>

Markah Html

<!-- Demo 1 --> <div id="demo-1" class="demobox"> <img src="Url Gambar yang anda inginkan"/> </div> <!-- Demo 2 --> <div id="demo-2" class="demobox"> <img src=" Url Gambar yang anda inginkan "/> </div> <!-- Demo 3 --> <div id="demo-3" class="demobox"> <img src=" Url Gambar yang anda inginkan "/> <div class="details"> <h3>Transformers</h3> <p>More than meets the eye</p> </div> </div> <!-- Demo 4 --> <div id="demo-4" class="demobox"> <img src=" Url Gambar yang anda inginkan "/> <div class="details"> <h3>Transformers</h3> <p>More than meets the eye</p> </div> </div> <!-- Demo 5 --> <div id="demo-5" class="demobox"> <img src=" Url Gambar yang anda inginkan "/> <div class="details"> <h3>Transformers</h3> <p>More than meets the eye</p> </div> </div> <!-- Demo 6 --> <div id="demo-6" class="demobox"> <img src=" Url Gambar yang anda inginkan "/> <div class="details"> <h3>Transformers</h3> <p>More than meets the eye</p> </div> </div>

Amazing Image Hover Effects using Webkit and CSS

Transformers

More than meets the eye

Transformers

More than meets the eye

Transformers

More than meets the eye

Transformers

More than meets the eye

Selamat Mencoba

credit: dinolatoga