Memungkinkan pengunjung melakukan zoom image pada saat hover kursor ini juga bisa berguna bagi situsweb toko online, yang umumnya memasang gambar produk dalam ukuran kecil. Sering agak sulit membuat keputusan membeli barang hanya dari thumbnails atau foto berukuran mini.
Begitu pun keberadaan thumbnails umumnya sangat dibutuhkan dan membantu bagi pemilik dan pengelola situsweb untuk memberi gambaran secara keseluruhan dan secara cepat tentang produk apa saja yang tersedia, atau foto apa dan berapa banyak foto yang bisa dilihat di blog.
Pada foto di atas, ketika cursor hover di atas sebuah foto, foto membesar 3x lipat dari aslinya, dengan posisi relatif yang membuatnya berada di bawah thumbnail foto berikutnya. Jika posisinya tidak dibuat relatif maka zoom foto akan menutupi seluruh foto yang ada di sekelilingnya, membuat pengunjung praktis tak bisa melihat foto berukutnya.
Seberapa besar zoom bergantung pada ukuran thumbnail yang ditampilkan dan ukuran image pada servernya. Dalam contoh di atas, ditampilkan ukuran thumbnail dengan lebar 72px, sedangkan lebar image pada server adalah 250px, sehingga tidak akan pecah jika dizoom hingga 3x tampilan.
Markup HTML
Ada dua pilihan untuk markup HTML, yaitu menggunakan <span> atau <div>. Jika ingin agar foto thumbnails tetap dalam satu baris maka gunakan <span> atau jika memakai <div> gunakan display inline.<div class="hover-zoom">
<img src="https://nganu.jpg" alt="foto zoom">
</div>
<img src="https://nganu.jpg" alt="foto zoom">
</div>
atau
<span class="hover-zoom">
<img src="https://nganu.jpg" alt="foto zoom">
</span>
<img src="https://nganu.jpg" alt="foto zoom">
</span>
CSS
Ada tiga bagian CSS untuk zoom image saat hover. Yang pertama mengatur container, yang kedua mengatur transisi agar berlangsung mulus, dan yang ketiga mengatur besaran zoom..hover-zoom {height: 250px; overflow: hidden; position:relative}
.hover-zoom img {transition: transform .5s ease;}
.hover-zoom:hover img {transform: scale(3);}
.hover-zoom img {transition: transform .5s ease;}
.hover-zoom:hover img {transform: scale(3);}
Perintah overflow: hidden; sebenarnya mengatur agar perbesaran image tidak keluar dari container. Namun karena di situsweb ini tidak berjalan, maka saya tambahkan perintah position:relative; agar perbesarannya tidak menutupi foto berikutnya. Lihat hasilnya di ujung tulisan Leo Kristi di Warung Apresiasi Bulungan Jakarta Selatan.
Lihat Video
Jika menghendaki ada efek lain, silahkan kunjungi laman yang menginspirasi tulisan ini di sini.
Label: CSS, Tutorial
Bagikan ke: WhatsApp, Email. Print!.
