Efek Hover Image Kebalik

Kebayang sebelum munculnya CSS3 membuat shadows (bayangan) rumitnya minta ampun sob drop shadow use CSS. Sekarang mah gampang, tinggal masukin beberapa attribute CSS sudah bisa menghasilkan bayangan :)
Attribute border yang bisa menghias sebuah tampilan pada gambar Effect Pada Image menambah cantiknya penampilan. Coba tengok oleh sobat beberapa postingan Beben si bloglang anu ganteng kalem tea sebelumnya yang didukung oleh CSS mengenai hias menghiasi penampilan (kuhususnya gambar) buat blog kita tercinta ini :)

• efek televisi.
• efek bubble.
• efek hover.
• efek radial

Nah kali ini Beben mau berbagi bagaimana membuat efek untuk image, pada posisi awal keadaannya terbalik dan ketika disorot cursor jadi menghilang posisi gambar akan menjadi normal kembali :D
Tentunya efek ini akan berhasil jika browsingan sobat sudah support terhadap CSS3! Trik ini menggunakan attribut CSS3 transform property. Oke deh mari kitu mulai, cari kode ]]></b:skin> pada template dan masukan kode-kode CSS berikut tepat sebelumnya.

Cool CSS3

.cool img {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
background-color: #FFFFEE;
margin: 3px;
padding: 3px;
}
.cool img:hover {
cursor: none;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform:rotate(360deg);
-webkit-box-shadow: 0 2px 5px 2px rgba(0,0,0, .7);
-moz-box-shadow: 0 2px 5px 2px rgba(0,0,0, .7);
box-shadow: 0 2px 5px 2px rgba(0,0,0, .7);
background-color: #AA0000;
}

Dasar pokok attribut Css3-nya seperti itu, jika sobat mau menambahkan variabel lainnya silahkan ;) Lalu ketika mau memakainya, sobat blogger hanya tinggal memakai tag seperti berikut ini<div class="cool">
<img src="http://your-LINK-Image.jpg" border="0" alt="">
</div>Kalau sobat beres melakukan upload image pada sesi postingan, maka hasil generatenya...

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwh7gGPwNdhL56K4V6ITiVUfnuzQTM-7HzQs74RxUOOjYlHvEm5FmD_KbOxs5BbWPXFx-41uWrMj3iT9aRUN6oPSkv9ayYKvPyVnSGcYlV4XumDKTzKDJR26AYXX32Y-DFTQBD9uL8nsQ/s1600/shThemeEmacs.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100%;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwh7gGPwNdhL56K4V6ITiVUfnuzQTM-7HzQs74RxUOOjYlHvEm5FmD_KbOxs5BbWPXFx-41uWrMj3iT9aRUN6oPSkv9ayYKvPyVnSGcYlV4XumDKTzKDJR26AYXX32Y-DFTQBD9uL8nsQ/" border="0" alt="shThemeEmacs" id="BLOGGER_PHOTO_ID_5575927697186567330" /></a>

Tinggal bubuhkan saja didalam syntax link variabel class="cool"

<a class="cool" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwh7gGPwNdhL56K4V6ITiVUfnuzQTM-7HzQs74RxUOOjYlHvEm5FmD_KbOxs5BbWPXFx-41uWrMj3iT9aRUN6oPSkv9ayYKvPyVnSGcYlV4XumDKTzKDJR26AYXX32Y-DFTQBD9uL8nsQ/s1600/shThemeEmacs.png">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100%;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwh7gGPwNdhL56K4V6ITiVUfnuzQTM-7HzQs74RxUOOjYlHvEm5FmD_KbOxs5BbWPXFx-41uWrMj3iT9aRUN6oPSkv9ayYKvPyVnSGcYlV4XumDKTzKDJR26AYXX32Y-DFTQBD9uL8nsQ/" border="0" alt="shThemeEmacs" id="BLOGGER_PHOTO_ID_5575927697186567330" />
</a>

Happy image \m/