Cara Memberikan Efek Zoom & Caption pada Gambar saat Disorot

loading...

Selamat datang di The Royal Moringa. Seperti yang sudah saya janjikan pada pertemuan sebelumnya, kali ini saya akan membahas lebih lanjut mengenai pemberian efek zoom dan caption pada gambar ketika disorot (mouse diarahkan ke gambar). Pada artikel sebelumnya saya mengajarkan bagaimana cara membuat efek zoom in (gambar diperbesar) saat pointer mouse menyorot ke gambar dan zoom out (gambar diperkecil) saat pointer mouse dijauhkan dari gambar atau sudah tidak berada pada gambar lagi. Nah, untuk menyambung tutorial sebelumnya, kali ini saya akan menambahkan caption atau teks keterangan yang berupa hyperlink yang membawa pembaca ke halaman yang dimaksud pada gambar. Hyperlink text ini biasanya berupa kata-kata seperti baca selengkapnya, lebih lanjut, baca lebih, teruskan membaca, continue reading, read more, show more, dan lain sebagainya. Jadi nantinya teks ini akan muncul di tengah-tengah gambar pada saat pointer mouse kita mengarah ke gambar dan ketika mouse kita mengarah ke teks maka teks dan border akan mengalami perubahan warna seperti tampilan gambar berikut.

Jika anda tertarik ingin mencoba membuatnya, langsung saja kita simak langkah-langkah berikut.

1. Log in ke akun blog anda > Pada dashboard pilih layout > Add a gadget > HTML/JavaScript

keterangan : posisi yang disarankan untuk meletakkan widget ini di sidebar, bottombar, atau footer

2. Copy dan paste kode script berikut

                                       <style> .zoomeffect { width:100%; height:100%; text-align:center; overflow:hidden; position:relative; cursor:default; } .zoomeffect img { cursor:pointer; display:block; position:relative; -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); } .zoomeffect .overlay { width:100%; height:100%; top:0; left:0; position:absolute; overflow:hidden; opacity:0; background-color:rgba(0,0,0,0.5); -webkit-transition:all .4s ease-in-out; transition:all .4s ease-in-out } .zoomeffect a.more { text-decoration:none; display:inline-block; text-transform:uppercase; margin:52px 0 0; padding:6px 12px; color:#fff; border:1px solid #fff; background-color:transparent; opacity:0; filter:alpha(opacity=0); -webkit-transition:all .2s ease-in-out; transition:all .2s ease-in-out; } .zoomeffect:hover .overlay { opacity:1; filter:alpha(opacity=100); } .zoomeffect a.more:hover { border:1px solid #66ff00;; color:#66ff00; } .zoomeffect:hover a.more { opacity:1; filter:alpha(opacity=100); -ms-transform:translatey(0); -webkit-transform:translatey(0); transform:translatey(0); -webkit-transition-delay:.2s; transition-delay:.2s; } </style> <div class="zoomeffect"> <img src="URL GAMBAR ANDA" alt="TEKS"> <div class="overlay"> <a class="more" href="#">read more</a> </div> </div> </div>

3. Silakan anda ganti URL GAMBAR ANDA dan TEKS yang muncul saat gambar disorot, # diganti dengan url halaman website yang dimaksud > Save

Pada pengaturan CSS di atas, anda boleh mengubah warna dan jenis huruf pada teks sesuai selera anda. Pada pertemuan berikutnya, saya akan membahas mengenai macam-macam efek yang dapat diberikan pada gambar ketika disorot. Bagi yang mau baca artikel sebelumnya bisa klik disini. Terima kasih telah membaca!

loading...