Box Shadow Hover Image

Image Box Shadow dalam trick CSS3 kali ini adalah bagaimana membuat sebuah gambar yang ketika kita sorot mouse maka gambar itu akan menjadi berbayang. Lumayan astik seh trick Box Shadow Hover Image dengan CSS3 guna mempercantik gambar yang ada di postingan, ketimbang gambar yang kita pasang hanya polos alias tidak berbaju. Mendingan kita pake sedikit baju CSS3 box shadow. Property yang kita butuhkan hanya Box Shadow (bayangan) dengan sedikit tambahan Border Radius (sudut lengkung), cuman itu aja kok zob. Gampang bukan, yuk kita buat trick ini menjadi spesial bila dipasang di blog kita. Oiya supaya ntar lebih bagus lagi, kalian harus memperhatikan lebar dan tinggi gambar, jangan sampai melebihi batas margin dan padding dari mainwrapper. Tau khan maksudku, moga kalian paham dan tolong dicermati sekali lagi. Supaya gambar yang kalian pasang nggak melebar kesana kemari.

Masuk dulu di Edit HTML
Cari kode ini ]]></b:skin>
Letakkan CSS3 berikut persis diatasnya

.devilzbay {
padding:5px 5px 5px 5px;
margin:5px 5px 5px 5px;
border: 2px inset #ff0000;
}
a:hover img.devilzbay {
padding:5px 5px 5px 5px;
margin:5px 5px 5px 5px;
border: 2px inset #ff0000;
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;
-webkit-border-radius-top-left:20px;
-webkit-border-radius-top-right:20px;
-webkit-border-radius-bottom-left:20px;
-webkit-border-radius-bottom-right:20px;
-moz-box-shadow: 0px 0px 12px #00ffff;
-webkit-box-shadow: 0px 0px 12px #00ffff;
box-shadow: 0px 0px 12px #00ffff;
}

Sekarang kalian pahami property itu
yang kita butuhkan hanyalah ini ::

-moz-box-shadow: 0px 0px 12px #00ffff;
-webkit-box-shadow: 0px 0px 12px #00ffff;
box-shadow: 0px 0px 12px #00ffff;

Sedangkan untuk penghiasnya kita kasih radius

-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;
-webkit-border-radius-top-left:20px;
-webkit-border-radius-top-right:20px;
-webkit-border-radius-bottom-left:20px;
-webkit-border-radius-bottom-right:20px;

Kalian bisa liat dan pahami satu persatu
Semoga kalian pahami yang telah aku tulis

Terus masuk ke postingan atau sidebar
Kasih HTML berikut ini

<a href="http://1001tawa.blogspot.com"/><img class="devilzbay" src="http://1001tawa.blogspot.com/2011/12/chibi-itachisasuke.jpg" width="360" height="240"/></a>

Ingat yang
width :360px lebar gambar
height:240px tinggi gambar

Jangan sampai gambarnya terpotong oleh panjang mainwrapper
Selamat mengerjakan sobat

Blogger Yang Baek, Meninggalkan Jejak Berupa Komentar