Galeri Gambar CSS Sederhana dengan Teks

sukma
sukma
3 minute read

Hari ini, kita akan membuat galeri berbasis CSS sederhana dengan keterangan gambar. Sebenarnya, ini bukan galeri biasa melainkan kisi gambar CSS dengan judul dan deskripsi di bawah foto.

Ini adalah galeri tata letak blok yang memungkinkan Anda menampilkan banyak gambar sebagai kisi. Ini juga memungkinkan menambahkan judul setiap gambar dan deskripsi. Galeri showcase ini sangat cocok jika Anda akan membangun situs web portofolio.

Tetapi jika Anda ingin membuat galeri gambar mini, Anda dapat melihat Galeri Foto HTML Sederhana kami yang mengubah gambar saat mengklik gambar mini.

Ini adalah galeri media responsif tanpa menggunakan pertanyaan media. Kami akan membantu max-width untuk membuat galeri berfungsi di perangkat seluler dan desktop.

Galeri media sangat cocok untuk situs web portofolio atau situs web fotografi. Jika Anda berencana untuk membuatnya, ini mungkin membantu Anda.

Cara Membuat Galeri Gambar dengan Teks

Mari kita mulai dengan HTML. Kodenya mudah dimengerti. Kami memiliki pembungkus dan kemudian div anak.grid

Selanjutnya, kami akan menempatkan setiap media di dalam grid-item. Kami akan mendefinisikan figure elemen dan tempat tag gambar dan keterangan atau judul.

<div class="wrapper"> <div class="grid">     <div class="grid-item">         <figure>             <img src="https://unsplash.it/250/187?image=400" alt="">             <figcaption>Image Title</figcaption>         </figure>     </div>     <div class="grid-item">         <figure>             <img src="https://unsplash.it/250/187?image=401" alt="">             <figcaption>Image Title</figcaption>         </figure>     </div> </div> </div>

Gaya CSS untuk Galeri

Sekarang mari kita lihat CSS. Grid max-width diatur ke 1000px, dan ini menggunakan tampilan flex dengan justify-content agar semua item sejajar dengan benar.

.grid {   max-width: 1000px;   margin: 0 auto;   display: -webkit-box;   display: -ms-flexbox;   display: flex;   -ms-flex-wrap: wrap;       flex-wrap: wrap;   -webkit-box-pack: center;       -ms-flex-pack: center;           justify-content: center; }

Setiap item petak memiliki lebar minimal dan lebar maksimal 250 piksel.

.grid-item {   min-width: 250px;   max-width: 250px;   -webkit-box-flex: 1;       -ms-flex: 1 1 250px;           flex: 1 1 250px;   padding-left: .5rem;   padding-right: .5rem;   margin-bottom: 1rem; }

Kami mengatur pembungkusnya ke 100vh sehingga ia akan memperoleh tinggi badan yang utuh.

.wrapper {   min-height: 100vh;   padding: 2rem 0;   background: #40424a;   color: #e4e4e8;   font-family: 'Roboto', sans-serif;   text-align: center; } .grid-item figure {   padding: 0;   margin: 0;   box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05); }

Baris CSS sederhana berikut membuat galeri gambar & teks Anda responsif.

.grid-item figure img {   display: block;   max-width: 100%; } .grid-item figcaption {   display: block;   padding: .625rem .5rem;   background: #474952; }