Animasi CSS Pada Gambar Di Blog

Langsung aja kita lihat contoh dibawah ini.

Coba gambar tersebut disorot dengan mouse, maka akan berganti gambar. Kode gambar di atas adalah sebagai berikut.

<style type="text/css">.kodokloncat{float:center; margin:0px; autowidth:0px; autoheight:0px; autoborder:none; overflow:hidden}.details{width:200px; height:300px; background:#fff; color:#fff; text-align:center} #kodok-3{position:relative;}#kodok-3 img{opacity:1-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#kodok-3 .details{position:absolute;top:0;left:0;opacity: 0;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#kodok-3 .details:hover{opacity: .9;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}</style><div class="kodokloncat" id="kodok-3">
<img src="http://i1081.photobucket.com/albums/j355/KurniawanPj/Emo%20Kaskus/ngacir2.gif" /><div class="details">
<img height="50" src="http://i1081.photobucket.com/albums/j355/KurniawanPj/Emo%20Kaskus/tkp.gif" width="70" /></div>
</div>

Tulisan yang berwarna biru, silahkan di isi dengan kode warna HTML yang lain. Tulisan warna merah silahkan di isi dengan URL gambar yang disuka.

Contoh berikutnya, sorot gambar dibawah, maka gambar akan berpindah.

Kode dari trik di atas adalah sebagai berikut:

<style type="text/css">#timings_demo {margin:0 auto;border:0px #aaa solid;padding:10px;}.abstrak_box{width:280px;height:200px;margin-bottom:10px;background:url(http://i1081.photobucket.com/albums/j355/KurniawanPj/Google%20Translate/BrasilFlag.png)}#ease.abstrak_box{-webkit-transition: all 4s ease;-moz-transition: all 4s ease;-o-transition: all 4s ease;-webkit-transition: all 4s ease;transition: all 4s ease;border:1px #f00 solid;}#timings_demo:hover .abstrak_box, #timings_demo.hover_effect .abstrak_box{margin-left:440px;-webkit-border-radius:40px 40px;-moz-border-radius:40px 40px;-o-border-radius:25px;-webkit-transform: rotate(360deg);-moz-transform:rotate(360deg);transform:rotate(360deg);background-color:#fff;</style><div id="timings_demo"><div class="abstrak_box" id="ease"><div class="center"></div></div></div>

Kode yang berwarna merah silahkan diganti dengan URL gambar yang disuka. Copy dan paste kode tersebut di postingan edit HTML.

Selamat berkesperimen.
Sumber