Artikel Tutorial-Webdesign kali ini akan mencoba membuat halaman gallery cantik dengan CSS3.
Idenya yaitu kita akan membuat image menjadi meredup ketika mouse hover, disaat bersamaan muncul icon zoom, tapi kita tidak akan membuat efek membesarnya.
Kalau anda mengenal Jquery Plugin Lightbox, mungkin anda sudah terbiasa melihat ini.
Layaknya memasak, kita siapkan dulu bahan-bahan nya.
a
, di dalam tag tersebut kita sisipkan span
dan img
, kira-kira jika digambarkan akan terlihat seperti berikut ini
Gambaran layer
Struktur HTML
Code CSS
Pertama kita akan mengatur Container/Bagan dari halaman web kita
Selanjutnya mengatur posisi gambar
Menempatkan Icon Zoom sebagai background dari tag span
Memunculkan Icon Zoom ketika mouse hover
Responsive Web
Untuk membuat Website ini Responsive terhadap lebar layar, maka tambahkan script berikut ini. Ukuran layar bisa ditentukan sendiri :) download file untuk melihat script selengkapnya.
Dan hasilnya adalah sebagai berikut:
Oke sekian tutorial singkat ini, semoga bisa mempercantik website yang sedang anda buat
Jangan lupa follow twitter kami @tut_web
Comments