Home / HTML / Membuat Galeri Gambar Responsif dengan HTML

Membuat Galeri Gambar Responsif dengan HTML

Created at by Aris Munandar
Share on

Galeri gambar HTML adalah komponen penting dalam website modern yang menampilkan koleksi foto atau gambar secara menarik dan terorganisir. Dalam panduan lengkap ini, kita akan belajar cara membuat galeri gambar responsif menggunakan HTML dan CSS dengan teknik modern seperti CSS Grid.

Daftar isi

Baca juga: Membuat Form Kontak dengan HTML + Email Submission

Mengapa Galeri Gambar Penting untuk Website?

Memiliki galeri gambar html yang baik memberikan banyak manfaat:

  • Visual Appeal – Menampilkan konten visual yang menarik perhatian
  • Portfolio – Showcase karya atau produk dengan profesional
  • User Experience – Navigasi gambar yang mudah dan intuitif
  • Responsif – Tampil sempurna di semua perangkat
  • Performance – Loading cepat dengan optimasi yang tepat

Persiapan Sebelum Memulai

Sebelum membuat galeri gambar html, pastikan Anda memahami:

  1. HTML Dasar – Tag img, div, dan struktur semantik
  2. CSS Grid – Untuk layout responsif
  3. CSS Transitions – Untuk efek hover yang smooth
  4. Responsive Design – Media queries untuk berbagai ukuran layar

Sumber Gambar Gratis untuk Testing

Untuk testing galeri gambar html, gunakan layanan gambar gratis berikut:

https://picsum.photos/400/300?random=1
https://picsum.photos/400/300?random=2
https://picsum.photos/400/300?random=3Code language: JavaScript (javascript)

Keuntungan Picsum Photos:

  • Gratis tanpa API key
  • Reliable dan cepat
  • Random gambar berkualitas
  • Mudah digunakan

Kita akan menggunakan Picsum Photos karena lebih stabil dan mudah diakses.

Langkah 1: Membuat Struktur HTML Galeri

Mari kita mulai dengan membuat file HTML untuk galeri gambar html kita.

1.1 Membuat File HTML Dasar

Buat file baru bernama gallery.html:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Galeri gambar responsif dengan HTML dan CSS">
    <title>Galeri Gambar Responsif</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header class="gallery-header">
            <h1>Galeri Foto Saya</h1>
            <p class="subtitle">Koleksi foto pilihan dari berbagai kategori</p>
        </header>
    </div>
</body>
</html>Code language: HTML, XML (xml)

Penjelasan:

  • viewport – Membuat galeri responsif di semua perangkat
  • .container – Wrapper untuk mengatur lebar maksimal
  • .gallery-header – Header untuk judul galeri

1.2 Membuat Container Galeri

Tambahkan container untuk galeri gambar html:

<main class="gallery-container">
    <div class="gallery-grid">
        <!-- Gallery items akan ditambahkan di sini -->
    </div>
</main>Code language: HTML, XML (xml)

Penjelasan:

  • <main> – Tag semantik untuk konten utama
  • .gallery-grid – Grid layout untuk gambar

1.3 Menambahkan Item Galeri

Tambahkan item gambar dengan struktur yang konsisten:

<div class="gallery-item">
    <img src="https://picsum.photos/400/300?random=1" alt="Nature Photography">
    <div class="gallery-overlay">
        <h3 class="gallery-title">Nature</h3>
        <p class="gallery-description">Beautiful landscape photography</p>
    </div>
</div>Code language: JavaScript (javascript)

Penjelasan:

  • .gallery-item – Container untuk setiap gambar
  • <img> – Gambar dari Picsum Photos dengan parameter random
  • .gallery-overlay – Overlay yang muncul saat hover

Langkah 2: Styling dengan CSS

Sekarang kita akan membuat file style.css untuk styling galeri gambar html yang menarik.

2.1 Reset dan Base Styling

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 40px 20px;
}Code language: CSS (css)

Penjelasan:

  • box-sizing: border-box – Perhitungan width lebih mudah
  • linear-gradient – Background gradient yang menarik
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}Code language: CSS (css)

Penjelasan:

  • display: grid – Menggunakan CSS Grid layout
  • repeat(auto-fit, minmax(300px, 1fr)) – Kolom otomatis responsif
  • gap: 20px – Jarak antar item
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-10px);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}Code language: CSS (css)

Penjelasan:

  • object-fit: cover – Gambar memenuhi container
  • transform: scale(1.1) – Zoom effect saat hover

2.4 Styling Overlay

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    color: white;
    padding: 30px 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    transform: translateY(0);
}Code language: CSS (css)

Penjelasan:

  • transform: translateY(100%) – Overlay tersembunyi
  • Saat hover, overlay muncul dengan animasi slide up

Kode Lengkap Galeri Gambar HTML

File: gallery.html (Lengkap)

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Galeri gambar responsif dengan HTML dan CSS">
    <title>Galeri Gambar Responsif</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header class="gallery-header">
            <h1>Galeri Foto Saya</h1>
            <p class="subtitle">Koleksi foto pilihan dari berbagai kategori</p>
        </header>

        <main class="gallery-container">
            <div class="gallery-grid">
                <div class="gallery-item">
                    <img src="https://picsum.photos/400/300?random=1" alt="Nature Photography">
                    <div class="gallery-overlay">
                        <h3 class="gallery-title">Nature</h3>
                        <p class="gallery-description">Beautiful landscapes</p>
                    </div>
                </div>

                <div class="gallery-item">
                    <img src="https://picsum.photos/400/300?random=2" alt="City Photography">
                    <div class="gallery-overlay">
                        <h3 class="gallery-title">City</h3>
                        <p class="gallery-description">Urban architecture</p>
                    </div>
                </div>

                <div class="gallery-item">
                    <img src="https://picsum.photos/400/300?random=3" alt="People Photography">
                    <div class="gallery-overlay">
                        <h3 class="gallery-title">People</h3>
                        <p class="gallery-description">Portrait photography</p>
                    </div>
                </div>

                <div class="gallery-item">
                    <img src="https://picsum.photos/400/300?random=4" alt="Food Photography">
                    <div class="gallery-overlay">
                        <h3 class="gallery-title">Food</h3>
                        <p class="gallery-description">Culinary delights</p>
                    </div>
                </div>

                <div class="gallery-item">
                    <img src="https://picsum.photos/400/300?random=5" alt="Animal Photography">
                    <div class="gallery-overlay">
                        <h3 class="gallery-title">Animals</h3>
                        <p class="gallery-description">Wildlife photography</p>
                    </div>
                </div>

                <div class="gallery-item">
                    <img src="https://picsum.photos/400/300?random=6" alt="Technology Photography">
                    <div class="gallery-overlay">
                        <h3 class="gallery-title">Technology</h3>
                        <p class="gallery-description">Modern tech</p>
                    </div>
                </div>

                <div class="gallery-item">
                    <img src="https://picsum.photos/400/300?random=7" alt="Travel Photography">
                    <div class="gallery-overlay">
                        <h3 class="gallery-title">Travel</h3>
                        <p class="gallery-description">World destinations</p>
                    </div>
                </div>

                <div class="gallery-item">
                    <img src="https://picsum.photos/400/300?random=8" alt="Art Photography">
                    <div class="gallery-overlay">
                        <h3 class="gallery-title">Art</h3>
                        <p class="gallery-description">Creative artwork</p>
                    </div>
                </div>
            </div>
        </main>
    </div>
</body>
</html>Code language: HTML, XML (xml)

File: style.css (Lengkap)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 40px 20px;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

.gallery-header {
    text-align: center;
    margin-bottom: 50px;
    color: white;
}

.gallery-header h1 {
    font-size: 3rem;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
}

.gallery-container {
    max-width: 1400px;
    margin: 0 auto;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 4 / 3;
}

.gallery-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    color: white;
    padding: 30px 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    transform: translateY(0);
}

.gallery-title {
    font-size: 1.5rem;
    margin-bottom: 5px;
    font-weight: 600;
}

.gallery-description {
    font-size: 0.95rem;
    opacity: 0.9;
}

@media (max-width: 1200px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .gallery-header h1 {
        font-size: 2rem;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
        padding: 10px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 20px 10px;
    }
    
    .gallery-header h1 {
        font-size: 1.8rem;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}Code language: CSS (css)

Dari kode diatas maka akan menghasilkan halaman HTML seperti gambar di bawah ini.

Membuat Galeri Gambar Responsif dengan HTML

Tips Optimasi Galeri Gambar

1. Lazy Loading

<img src="image.jpg" alt="Description" loading="lazy">Code language: HTML, XML (xml)

2. Alt Text untuk SEO

<img src="nature.jpg" alt="Beautiful mountain landscape at sunset">Code language: HTML, XML (xml)

3. Aspect Ratio

.gallery-item {
    aspect-ratio: 4 / 3;
}Code language: CSS (css)

Kesimpulan

Membuat galeri gambar html yang responsif adalah skill penting untuk web developer. Dengan mengikuti panduan di atas, Anda telah berhasil membuat galeri yang:

  • ✅ Responsif di semua perangkat
  • ✅ Menggunakan CSS Grid modern
  • ✅ Memiliki hover effects yang menarik
  • ✅ Menggunakan 8 gambar gratis dari Picsum Photos
  • ✅ SEO-friendly dengan alt text
  • ✅ Loading cepat dan reliable

Selamat mencoba membuat galeri gambar HTML Anda sendiri

Share on

Related article!

Comments

Congrats, you have the opportunity to be the first commenter on this article. Have questions or suggestions? Please leave a comment to start discussion.

Leave comment

Your email address will not be published. Required fields are marked *

Discover more from Bahasaweb.com

Subscribe now to keep reading and get access to the full archive.

Continue reading