Cara Memberikan Efek Zoom pada Gambar ketika Disorot

loading...

Selamat datang di The Royal Moringa. Pada pertemuan kali ini saya akan membahas bagaimana cara memberikan hover effect pada gambar agar tampil lebih menarik. Sebenarnya ada banyak jenis image hover effect yang dapat diberikan pada gambar tetapi kali ini saya akan membahas salah satu diantara banyak jenis efek hover tersebut yaitu zoom effect.

Sebelumnya saya informasikan dulu bagi yang masih belum paham dengan kegunaan dari hover effect yang diberikan pada gambar. Pernahkah anda mengunjungi sebuah website yang memiliki galeri gambar dimana ketika pointer mouse anda diarahkan menuju ke gambar tersebut, gambar itu bergerak ke atas, bawah, kiri, ataupun kanan, ada juga yang menjadi lebih besar atau lebih kecil, ada yang putar balik, menjadi lebih gelap, dan lain sebagainya? Bahkan ada beberapa gambar yang memunculkan caption atau tulisan ketika disorot. Nah, itu semua adalah efek animasi yang diberikan pada gambar dan sering dikenal dengan istilah hover effect. Pemberian efek hover pada gambar tentu menjadi daya tarik tersendiri bagi sebuah blog/website. Kalau biasanya efek animasi diperoleh melalui JavaScript, kali ini cukup menggunakan kode CSS saja. Jika anda tertarik ingin mencoba silakan simak langkah-langkah berikut.

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

                                      <style> .zoomeffect { width:100%; height:100%; text-align:center; overflow:hidden; position:relative; cursor:default; } .zoomeffect img { display:block; position:relative; cursor:pointer; -webkit-transition:all .4s linear; transition:all .4s linear; width:100%; } .zoomeffect:hover img { -ms-transform:scale(1.2); -webkit-transform:scale(1.2); transform:scale(1.2); } </style> <div class="zoomeffect"> <img src="URL GAMBAR ANDA" alt="TEXT"> </div>

2. Silakan ganti URL GAMBAR ANDA dan TEXT yang akan muncul ketika gambar disorot. Jika tidak menginginkan alt text bisa dihapus > Save

Selesai. Sederhana sekali kan? Image Hover Effect sebenarnya banyak dijumpai dalam bentuk gallery sederhana yaitu kumpulan gambar yang dibuat berjejer dalam satu baris menjadi sebuah widget sendiri atau menjadi 2 baris dan beberapa kolom tergantung kebutuhan. Tutorial kali ini saya buat sederhana yaitu hanya memberikan efek hover pada gambar, untuk peletakkan anda bebas menentukan. Kalau anda punya widget footer 3 atau 4 kolom bisa diletakkan disini gambarnya. Untuk mempermudah anda, pada kesempatan yang akan datang saya akan menjelaskan lebih lanjut yaitu mengenai pemberian efek caption pada gambar yang disorot dan juga wrapper yang khusus untuk menampung gambar-gambar dengan efek hover. Nantikan artikelnya...terima kasih telah membaca!

loading...