Cara Menambah Effect Zoom Pada Thumbnail Image di Homepage

Pada bagian terdahulu pernah saya bahas tentang cara menambahkan efek zoom pada gambar/image, namun hal tersebut hanya terbatas hanya pada isi posting dan kali ini saya coba tambahkan sedikit untuk menerapkannya pada thumbnail image yang terdapat di homepage blog. Memang sedikit lebih sulit untuk penerapan pada thumbnail ini, karena terlebih dahulu harus dikenali bagian mana style yang diterapkan pada halaman homepage.

Homepage adalah bagian pertama yang akan tampil ketika membuka sebuah halaman blog, dari sinilah harus dicari bagian-bagian mana saja yang dalam template yang termasuk dalam susunan homepage.

Bagian dalam susunan template yang termasuk merupakan bagian homepage biasanya diawali dengan kode.

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Atau bisa juga dengan kode gabungan seperti contoh dibawah ini dan kode yang sejenis.

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot; and data:blog.pageType != &quot;error_page&quot;'>

Apabila contoh kode diatas sudah ditemukan, maka selanjutnya harus ditemukan kode thumbnail image pada homepage, sebagai contoh berikut ini.

._post-thumbnail-area amp-img, .post-thumbnail-area amp-img, .thumbnail-area amp-img, .thumbnail amp-img, .thumbnail img dan yang sejenis.

Pada CSS diatas harus ditambahkan style seperti dibawah.

-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-webkit-transition-duration: 0.5s;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;

Kalau dibagian homepage template belum diterisi hover, maka harus ditambah untuk menerapkan efek zoom image seperti contoh dibawah.

._post-thumbnail-area amp-img:hover, .post-thumbnail-area amp-img:hover, .thumbnail-area amp-img:hover, .thumbnail amp-img:hover, .thumbnail img:hover.

Pada style hover diatas bisa ditambahkan efek zoom seperti contoh dibawah ini.

._post-thumbnail-area amp-img:hover {-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);opacity: 1;}

Pada teks box merah bisa diganti sesuai kode CSS template yang dipakai.
Sedangkan untuk template yang sudah memiliki hover pada bagian thumbnail image homepage, maka cukup tambahkan kode dibawah.

-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);opacity: 1;

Sehingga gabungan CSS/style diatas akan tampak seperti dibawah ini.

._post-thumbnail-area amp-img { style template anda -webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-webkit-transition-duration: 0.5s;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;}

._post-thumbnail-area amp-img:hover {-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);opacity: 1;}

pada teks box style template anda adalah style asli template anda dan tidak perlu dirubah.
Untuk review bisa dilihat pada tampilan homepage blog saya jika belum dirubah....

Sekian pemaparan dari saya, mudah-mudahan bermanfaat bagi kita semua.

Saya juga siap menerima kritik, keluhan dan juga saran dari anda, kerena dengan begitu berarti keberadaan saya sudah dianggap bagian dari teman-teman semua, terima kasih.