Galeri Gambar CSS Responsif Sederhana dengan Gambar Mini
Apakah Anda mencari galeri dengan CSS saja? Dalam posting ini, saya akan membuat galeri gambar CSS responsif sederhana dengan thumbnail dan kode HTML minimal.
Galeri ini berfungsi ketika pengguna mengklik thumbnail dan semua thumbnail di sisi kiri ditambahkan secara vertikal. Gambar utama sebuah galeri terletak di sisi kanan. Saat pengguna mengklik thumbnail, gambar utama berubah sesuai dengan thumbnail.
Galeri gambar ini terlihat lebih bagus dalam desain dan berfungsi pada event klik seperti ketika pengguna mengklik thumbnail, itu akan mengubah gambar utama.
Anda mungkin juga menyukai: Galeri Gambar CSS Sederhana dengan Teks
Acara klik adalah sesuatu yang menarik dan hanya dapat dicapai dengan menggunakan Javascript. Tapi di sini kita akan mencapai event klik menggunakan CSS3.
Dengan menggunakan CSS3 :checked dan ~ elemen, kita dapat dengan mudah membuat acara di-klik. CSS3 sangat kuat dan menghilangkan batasan untuk membangun apapun yang Anda inginkan.
Cara Membuat Galeri Gambar CSS Responsif Sederhana dengan Gambar Mini
Galeri sederhana ini juga memiliki fitur lain yang lebih besar yaitu status aktif. Ini menunjukkan warna perbatasan yang berbeda di sekitar thumbnail untuk thumbnail aktif.
Ini memungkinkan pengguna mengetahui status aktif suatu gambar.
Ini adalah galeri ringan yang tidak memerlukan javascript apa pun. Sangat mudah untuk menyesuaikan dan memungkinkan untuk menambahkan gambar dan thumbnail.
Markup HTML Dasar
Galeri terdiri dari dua jenis blok. Satu blok berisi thumbnail, dan blok kedua memiliki gambar besar. Kami memiliki tempat semua konten di dalam wadah utama .mage-gallery
Setiap thumbnail didefinisikan dalam elemen HTML5 label dan kontrol melalui tombol radio jenis masukan.
Tombol radio memiliki ID unik untuk mengontrol setiap gambar. Inset gambar besar di dalam bagian dengan ID unik.
<div class="image-gallery"> <input id="tab1" type="radio" name="tabs" checked> <label for="tab1"><img width="100" height="100" src="https://cdn.pixabay.com/photo/2017/01/02/09/43/chinese-lantern-plant-1946358_960_720.jpg"></label> <section id="content1"> <img src="https://cdn.pixabay.com/photo/2017/01/02/09/43/chinese-lantern-plant-1946358_960_720.jpg"> </section> </div>
Mari Mulai Menggaya
Untuk membuat galeri berfungsi, kita akan menggunakan dua properti CSS. Yang pertama adalah display: flex; dan yang kedua flex-flow: column wrap;
.image-gallery { display: flex; flex-flow: column wrap; height: 600px; margin: 0 auto; max-width: 800px; min-width: 320px; } i) Secara Default Sembunyikan Gambar Utama
Semua bagian besar secara default display: none;
.image-gallery section { display: none; margin-left: 20px; width: 100%; } .image-gallery section img{ height: auto; max-width: 100%; } ii) Menyembunyikan Tombol Radio
Kami tidak perlu menampilkan tombol radio, dan hanya ingin menggunakan fungsinya, jadi kami menyembunyikannya.
.image-gallery input { display: none; } iii) Styling Lables
Anda dapat mengatur gaya label sesuai keinginan Anda.
.image-gallery label { border: 1px solid #3194ee; margin: 0 0 10px; padding: 5px; text-align: center; width: 20%; } .image-gallery label:hover { cursor: pointer; } .image-gallery label img { height: auto; width: 100%; } iv) Gambar Mini Aktif
Anda dapat mendesain thumbnail aktif secara berbeda.
.image-gallery input:checked + label { border: 1px solid #004481; padding: 5px; } v) Tampilkan Gambar Utama
Itu display: block; properti akan bekerja ketika thumbnail dicentang.
.image-gallery #tab1:checked ~ #content1, .image-gallery #tab2:checked ~ #content2, .image-gallery #tab3:checked ~ #content3 { display: block; } Sekarang galeri siap untuk diterapkan di situs langsung. Anda dapat melihat demo untuk melihat cara kerjanya dan mengunduh kode sumber.
