Cara Memberikan Efek Gambar Berputar Saat Disorot

loading...

Selamat datang di The Royal Moringa. Pada pertemuan kali ini saya akan membahas mengenai bagaimana cara memberikan efek 3D flip pada gambar ketika disorot. Jadi, ketika pointer mouse kita mengarah pada gambar, gambar akan berputar 180°.  Bagian depan nantinya berupa gambar dan bagian belakang berupa background berwarna dan teks keterangan atau penjelas dari gambar yang dimaksud. Image Hover ini hanya menggunakan efek css dalam pelaksanaannya. Jika anda ingin mencoba membuatnya, mari perhatikan langkah-langkah berikut.

1. Log in ke akun blog anda > Pada dashboard pilih Layout > Tentukan dimana anda akan meletakkan gambar, boleh di sidebar ataupun di footer > Add a gadget > pilih HTML/JavaScript > copy dan paste kode script berikut.

                                     <style> *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .hovercontainer { width: 240px; height: 180px; position: relative; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; } #box { width: 100%; height: 100%; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .hovercontainer:hover #box { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); } #box figure { width: 240px; height: 180px; background-color:#cc9966; display: block; line-height: 18px; text-align: justify; font-weight: normal; font-size: 12px; position: absolute; color:#fff; font-family:Palatino Linotype; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } #box .back { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); } </style> <div class="hovercontainer"> <div id="box"> <figure class="front"><img src="URL GAMBAR ANDA" width="240px" height="180px" /></figure> <figure class="back"><h3 style="margin:3px"> TEKS ANDA DITULIS DI SINI</h3> </figure> </div> </div>

2. Silakan anda ganti URL GAMBAR ANDA dan TEKS yang ingin anda tampilkan ketika gambar disorot > Save dan lihat hasilnya

Pada Layout anda tidak perlu memisahkan antara bagian head dan body karena sudah otomatis sedangkan jika anda menaruh kode script di atas pada menu Edit HTML pada Theme maka anda perlu memisahkan antara bagian head dan body. Kode CSS diletakkan sebelum ]]></b:skin> dengan menghilangkan tag style sedangkan <div class="hovercontainer">...</div> diletakkan pada bagian body sesuai dengan posisi yang anda inginkan. Dengan menambahkan efek 3D flip pada gambar maka akan menambah daya tarik tersendiri bagi pengunjung website anda.

Simak juga artikel menarik lainnya mengenai cara memberikan efek zoom pada gambar. Pada kesempatan berikutnya saya akan membagikan informasi mengenai cara membuat widget 4 kolom yang berisi kumpulan gambar yang telah diberi efek 3D flip. Terima kasih telah membaca!

loading...