Cara Membuat Efek Transisi Pada Gambar

Sebelumnya saya pernah memposting css transisi dan transformasi. Sebenarnya cara ini juga dapat diterapkan pada gambar, namun kali ini saya akan menggunakan CSS yang berbeda. Tapi kawan-kawan jangan khawatir bahwa sebenarnya secara teori cara kerjanya sama. Trik ini akan menampilkan efek hover yang bekerja saat kursor anda diletakkan pada gambar tersebut dan efek transisi ke gambar lain.

Kalau sudah ikuti langkah berikut...
Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Letakkan Kode berikut di atas kode ]]></b:skin>

#cf {
 position:relative;
 height:281px;
 width:450px;
 margin:0 auto; 
}
#cf img {
 position:absolute;
 left:0;
 -webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 -o-transition: opacity 1s ease-in-out;
 transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
 opacity:0;
}   

Selanjutnya simpan template.
Pasang kode berikut pada gambar anda untuk memberi efek transisi

<div id="cf">
<img class="bottom" src="http://css3.bradshawenterprises.com/images/Summit.jpg" />
<img class="top" src="http://css3.bradshawenterprises.com/images/Cirques.jpg" />
</div>

Silahkan ganti kode berwarna merah dengan alamat gambar anda.
Selesai dan lihat hasilnya
Ok selamat mencoba dan sukses selalu...

"keep spirits and do the best"