Galeri Gambar CSS Murni dengan Gambar Mini

sukma
sukma
2 minute read

Apakah Anda mencoba galeri gambar layar penuh kami yang dibuat dengan CSS3? Bagaimana dengan galeri gambar CSS Murni dengan thumbnail yang memungkinkan Anda untuk mengubah gambar utama saat pengguna mengarahkan kursor ke atas thumbnail.

Sebelumnya, saya telah membangun Galeri Gambar CSS Sederhana yang tampak hebat yang memiliki antarmuka desain yang mengagumkan juga. Tapi di sini, saya akan membagikan galeri thumbnail responsif yang tidak memiliki slider tetapi memungkinkan untuk mengubah gambar utama saat pengguna mengarahkan kursor ke thumbnail.

Selain itu, saya akan memberi Anda kode dan contoh demo sehingga Anda dapat dengan cepat menerapkan dan mendapatkan ide tentang cara kerjanya.

Ini adalah galeri gambar yang fleksibel, responsif, dan dapat disesuaikan yang dioptimalkan untuk browser web seluler dan desktop. Ini juga memungkinkan untuk menampilkan keterangan pada gambar, dan Anda dapat menambahkan keterangan dengan mendefinisikan Atribut data HTML5.

Anda juga dapat menerapkannya dengan menambahkan beberapa baris kode HTML dan CSS, dan kami akan memandu Anda tentang cara melakukannya.

Bangun HTML Dasar untuk Galeri & Gambar Mini

HTML tidak terlihat tetapi hanya memiliki div galeri yang didefinisikan dengan tiga div turunannya. Div anak digunakan untuk menangani gambar utama dan gambar kecil. Jadi, struktur HTML dasar untuk galeri terlihat seperti di bawah ini:

<div class="gallery">   <div class="thumb lasagna" data-caption="lasagna"></div>   <div class="thumb girl" data-caption="cute girl"></div>   <div class="thumb rabbit" data-caption="rabbit eat grass?"></div> </div>

Apakah Anda memperhatikan bahwa setiap div turunan memiliki jempol nama kelas tetapi juga memiliki kelas yang berbeda? Seperti nama kelasnya lasagna akan digunakan untuk menentukan gambar di CSS. Serupa kami akan melakukan hal yang sama untuk anak perempuan dan kelinci.

Kami menggunakan data-caption "thml5" atribut untuk menentukan keterangan yang akan ditampilkan di atas gambar. Itu saja tentang HTML dan Sekarang CSS.

CSS untuk Galeri Gambar

Galeri perlu mengatur posisi relatif dan kemudian membutuhkan opasitas 0,7 saat mengarahkan kursor.

.gallery {   position: relative; } .gallery:hover .thumb {   opacity: .7; }

Thumb membutuhkan width dan height, dan kami menentukan tingginya menjadi 100px sedangkan lebar dalam persentase, dan itu akan menjadi 12,5%.

.thumb {   height: 100px;   width: 12.5%;   background: no-repeat center center;   background-size: cover;   transition: opacity 600ms; }

Kebijakan akan berubah saat mengarahkan kursor ke jempol, lalu menjadi 1

.gallery .thumb:hover {   opacity: 1; /* overrides blur, so active img is not blurred */ }

Kami menggunakan: after dan: before dengan thumbnail untuk mengatur opacity 0 agar disembunyikan. Kami memang perlu bermain lebih banyak dengan keduanya: setelah dan: sebelum itu, Anda dapat menemukannya di demo.

.thumb:before, .thumb:after {   opacity: 0;   width: 45%; }

Pada akhirnya, kami akan menentukan gambar, dan kami dapat dengan mudah melakukan seperti ini.

.thumb.lasagna {   background-image: url(https://cdn.pixabay.com/photo/2016/12/11/22/41/lasagna-1900529_960_720.jpg); }

Selesai! Sekarang Anda dapat melanjutkan dan menerapkan galeri gambar & thumbnail CSS murni ini ke situs web Anda.