Cara Membuat Box shadow Hover image CSS3

Membuat Box Shadow image dalam CSS3 ini adalah bagaimana membuat sebuah gambar yang ketika kita sorot mouse maka gambar itu akan menjadi berbayang atau dengan bahasa blognya hover.Box Shadow Hover Image dengan CSS3 untuk mempercantik gambar yang ada di postingan kita, jadi gambar yang dipostingan kita tidak terlihat polos.

Yang kita butuhkan hanya Box Shadow (bayangan) dengan Border Radius (sudut lengkung). ingat juga untuk memperhatikan lebar atau panjang box yang akan kita buat, jangan sampai melebihi batas margin dan padding dari mainwrapper atau halaman postingan kita. ikuti tutorial dibawah ini gan :

1.Masuk dulu di Edit HTML
2.Cari kode ini ]]></b:skin>
3.Letakan kode berikut tepat diatas nya

.Boxingg {
padding:5px 5px 5px 5px;
margin:5px 5px 5px 5px;
border: 2px inset #ff0000;
}
a:hover img.Boxingg {
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;
}

Sebenarnya kita hanya memerlukan kode ini :

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

Dengan penambahan border radius nya :

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

Untuk memanggil kode diatas kita perlu memakai HTML berikut :

<a href="http://Boys-exp.net"/><img class="boxingg" src="http://LINK GAMBAR.jpg" width="360" height="240"/></a>

• DEMO

Sekian tutorial Cara Membuat Box shadow Hover image CSS3 semoga bisa memperindah gambar di postingan yang tadinya polos.