Belajar CSS Part 28 - Membuat Galeri Gambar (Image Gallery)

Minggu, 12 Agustus 2018

Belajar CSS Part 28 - Membuat Galeri Gambar (Image Gallery)

CSS Image Gallery

CSS Image Gallery dapat digunakan untuk membuat sebuah galeri gambar yang didesain menggunakan CSS sehingga bisa memperoleh hasil yang menarik.

Galeri gambar berikut ini dibuat dengan menggunakan HTML dan CSS:

Contoh

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="gallery">
  <a target="_blank" href="nama_gambar.jpg">
    <img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="600" height="400">
  </a>
  <div class="desc">Tambahkan deskripsi gambar disini</div>
</div>

<div class="gallery">
  <a target="_blank" href="nama_gambar.jpg">
    <img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="600" height="400">
  </a>
  <div class="desc">Tambahkan deskripsi gambar disini</div>
</div>

<div class="gallery">
  <a target="_blank" href="nama_gambar.jpg">
    <img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="600" height="400">
  </a>
  <div class="desc">Tambahkan deskripsi gambar disini</div>
</div>

<div class="gallery">
  <a target="_blank" href="nama_gambar.jpg">
    <img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="600" height="400">
  </a>
  <div class="desc">Tambahkan deskripsi gambar disini</div>
</div>

</body>
</html>