Cara Membuat Image Hover Widget 4 Kolom dengan Efek Zoom dan Caption

loading...

Selamat datang di The Royal Moringa. Pada pertemuan kali ini, saya akan membahas bagaimana cara membuat image hover container 4 kolom. Prinsip pemasangan widget ini hampir sama seperti footer wrapper jadi widget ini berisi gambar yang dibagi menjadi 4 kolom. Masing-masing gambar bila disorot oleh pointer mouse maka akan memberikan efek animasi berupa zoom in (gambar diperbesar) dan muncul caption/teks keterangan dalam bentuk hyperlink. Saat pointer mouse dijauhkan dari gambar maka gambar akan muncul efek zoom out (gambar diperkecil) dan caption tadi hilang.

Pada artikel sebelumnya, saya telah membahas satu persatu mengenai efek pada gambar dimulai dari pemberian efek hover zoom pada gambar dan pemberian caption pada gambar saat dizoom. Nah, berikut ini adalah langkah-langkah menambahkan atau memasang widget image hover sebanyak 4 kolom di blog/website anda. Contoh tampilan gambarnya seperti ini.

1. Log in ke akun blog anda > Pada dashboard pilih Theme > Edit HTML > Copy dan paste kode script CSS berikut sebelum ]]></b:skin>

                                     .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%; position:absolute; overflow:hidden; top:0; left:0; 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; 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; margin:76px 5px 0; padding:6px 12px; } .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; } #marginresponsive{ width:1140px; margin:auto; } #image-hover-container{ float:left } #hover-widgets{ background:transparent; padding:20px 0 0; } .hover-widget-box{ width:280px; float:left; margin-right:0.15em; margin-left:0.15em; } #hover-widgets .hover-container{ padding: 0 } #hover-widgets .widget ul{ list-style:none; margin:0; padding:0; } #hover-widgets .widget ul li{ padding:0 0 6px; margin:0 0 6px; } .hoversec{ } @media only screen (max-width:768px){ #marginresponsive{ width:480px; margin:auto; } .hover-widget-box { width: 210px; float: left; padding: 10px; margin: 0 0.2em 0 0.2em; } #image-hover-container{ float:left; width:480px; } .zoomeffect a.more { margin:54px 2px 0; } } @media only screen (max-width:480px){ #marginresponsive{ width:250px; margin:auto; } .hover-widget-box { width: 230px; float: left; padding: 10px; } #image-hover-container{ float:left; width:250px; } .zoomeffect a.more { margin:56px 3px 0; }

2. Kemudian menuju bagian body dan carilah posisi dimana anda akan meletakkan widget ini apakah sebelum footer, sebelum new post, setelah slide show, dan lain sebagainya. Setelah itu copy dan paste kode script HTML berikut sesuai posisi yang telah anda tentukan tadi. Misal diletakkan sebelum footer maka pastekan kode tersebut sebelum atau di atas <div id="footer"> (nama id widget berbeda setiap template)

                                    <div id="marginresponsive"> <div style='clear'/> <div id='image-hover-container'> <div class='clearfix' id='hover-widgets'> <div class='hover-widget-box'> <ul class='hover-container'> <li style="list-style:none"> <b:section class='hoversec' id='hoversec1' showaddelement='yes'> <b:widget id='HTML15' locked='false' title='Judul 1' type='HTML'> <b:includable id='main'> <div class='widget-content'> <div class="zoomeffect"> <img class="img-responsive" src="URL GAMBAR ANDA" alt=""/> <div class="overlay"> <a class="more" href="#">read more</a> </div> </div> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> </li> </ul> </div> <div class='hover-widget-box'> <ul class='hover-container'> <li style="list-style:none"> <b:section class='hoversec' id='hoversec2' showaddelement='yes'> <b:widget id='HTML16' locked='false' title='Judul 2' type='HTML'> <b:includable id='main'> <div class='widget-content'> <div class="zoomeffect"> <img class="img-responsive" src="URL GAMBAR ANDA" alt=""/> <div class="overlay"> <a class="more" href="#">read more</a> </div> </div> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> </li> </ul> </div> <div class='hover-widget-box'> <ul class='hover-container'> <li style="list-style:none"> <b:section class='hoversec' id='hoversec3' showaddelement='yes'> <b:widget id='HTML17' locked='false' title='Judul 3' type='HTML'> <b:includable id='main'> <div class='widget-content'> <div class="zoomeffect"> <img class="img-responsive" src="URL GAMBAR ANDA" alt=""/> <div class="overlay"> <a class="more" href="#">read more</a> </div> </div> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> </li> </ul> </div> <div class='hover-widget-box'> <ul class='hover-container'> <li style="list-style:none"> <b:section class='hoversec' id='hoversec4' showaddelement='yes'> <b:widget id='HTML18' locked='false' title='Judul 4' type='HTML'> <b:includable id='main'> <div class='widget-content'> <div class="zoomeffect"> <img class="img-responsive" src="URL GAMBAR ANDA" alt=""/> <div class="overlay"> <a class="more" href="#">read more</a> </div> </div> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> </li> </ul> </div> </div> </div> </div>  

3. Ganti URL GAMBAR ANDA dan juga  # dengan url halaman/post yang dimaksud > Save Theme

Beberapa permasalahan yang mungkin muncul pada pemasangan widget ini adalah 'b:widget id should be unique' yang berarti nomor HTML tersebut telah anda gunakan sebelumnya jadi ganti dengan nomor lain seperti HTML79, HTML92, dll. Yang kedua widget footer anda mungkin tidak berada pada tempat yang semestinya (bergeser di sebelah widget image hover 4 kolom), solusinya adalah berikan height pada #marginresponsive disesuaikan ukuran gambar anda. 

Pastikan ukuran gambar yang anda pasang pada keempat kolom tadi sama. Jika tidak sama, maka anda harus memberikan pengaturan width dan height yang sama pada masing-masing gambar diletakkan pada tag <img>. Setelah memasang widget image hover ini anda dapat melakukan pengeditan melalui menu Layout baik untuk menambahkan teks ataupun judul widget. Jika ada yang kurang jelas dapat ditanyakan. Terima kasih telah membaca!

loading...