Cara Membuat Efek Hover Dengan CSS3

Salah satu efek yang bagus didukung cara pembuatannya
yang tidak sulit, tentu menjadi satu alasan bagi kita
semua untuk memilih dan menerapkan efek tersebut
ke dalam blog. Seperti pada tutorial kali ini yang mana
contohnya dapat Anda lihat di bawah ini. Silahkan
arahkan cursor Anda tepat berada di atas gambarnya :

Cara membuatnya adalah seperti berikut :

1.   Masuk ke Edit HTML.

2.   Cari tag </head>

3.   Copy kode berikut dan letakkan
      di atas tag </head> ini :

<style type="text/css">
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.6; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 20px gray; /*CSS3 shadow: 20px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 20px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 20px gray; /*Mozilla shadow version*/
opacity: 1;
}
</style>

KETERANGAN :

Aturlah opacity (kecerahan) gambarnya. Semakin
kecil nilai angkanya, gambarnya semakin pudar.

Atur juga besar dan warna shadownya
pada kode 0px 0px 20px gray;

4.   Rancangan -> Tambah Gadget ->
      HTML/JavaScript.

5.   Masukkan ke dalam kontennya
      kode berikut ini :

<div class="hovergallery">
<img src="URL gambar 01 Anda letakkan di sini" />
<img src="URL gambar 02 Anda letakkan di sini" /></div>

KETERANGAN :

Gantilah ke-2 (dua) gambar pada kode
di atas dengan URL gambar milik Anda.

Selamat mencoba dan tetap good luck!