Membuat galeri foto dengan css

Question

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

Table of Contents Show

Galeri Foto
Contoh lebih

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>

Catatan: Jangan lupa masukkan gambar yang ukurannya sama, agar terlihat sama besar saat dibuka di browser.

Pada kesempatan kali ini kita akan membuat gallery Image dengan HTML dan CSS. Langkah Pertama, buat file dengan nama “sampleimage.html” kemudian tambahkan perintah sebagai berikut :
<html>
<head>
<style>

</style>
</head>
<body>

<div class="gallery">
  <a target="_blank" href="d.jpg">
    <img src="d.jpg" alt="Cinque Terre" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="b.jpg">
    <img src="b.jpg" alt="Forest" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="c.jpg">
    <img src="c.jpg" alt="Northern Lights" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="d.jpg">
    <img src="d.jpg" alt="Mountains" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>
Hasilnya akan terlihat seperti ini :
Gambar akan ditampilkan secara vertikal. Hal ini disebabkan karena kita menambahkan tag <div></div>. Dimana tag <div> defaultnya memiliki sifat display block. Artinya tag yang bersifat block akan dicetak didalam baris baru. Oleh karena itu, kita menambahkan atribut class = “galery” yang nantinya akan kita gunakan sebagai selector di CSS agar dapat dimanipulasi tampilannya. Dalam hal ini, kita akan membuat agar gambar yang ditampilkan dapat sejajar dalam satu baru. Tambahkan perintah CSS ini kedalam tag <style></style> yang ada pada file “sampleimage.html” diatas. Adapun perintah CSSnya adalah sebagai Berikut:
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;
}
Dari perintah diatas, terlihat bahwa agar dapat memaksa gambar di dalam tag
dapat sejajar dalam satu baris adalah menambahkan properti css, yaitu properti float : left. Dengan menambahkan properti ini, maka tag html yang displaynya bersifat block dapat dipaksa agar dapat bersebelahan dengan tag lainnya. Biasanya properti ini digunakan saat menampilkan tulisan yang sejajar dengan gambar disebelahnya. Hasil akhirnya akan terlihat seperti ini :

❮ Sebelumnya Bab selanjutnya ❯

CSS dapat digunakan untuk membuat sebuah galeri gambar.
Menambahkan deskripsi gambar di sini
Menambahkan deskripsi gambar di sini
Menambahkan deskripsi gambar di sini
Menambahkan deskripsi gambar di sini
Galeri Foto
Galeri gambar berikut ini dibuat dengan CSS:
Contoh
<html>
<head>
<style>
div.img {
    margin: 5px;
    border: 1px solid #ccc;
float: left;
    width: 180px;
}

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

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

div.desc {
    padding: 15px;
text-align: center;
}
</style>
</head>
<body>

<div class="img">
<a target="_blank" href="fjords.jpg">
    <img src="fjords.jpg" alt="Fjords" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="img">
<a target="_blank" href="forest.jpg">
    <img src="forest.jpg" alt="Forest" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="img">
<a target="_blank" href="lights.jpg">
    <img src="lights.jpg" alt="Northern Lights" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="img">
<a target="_blank" href="mountains.jpg">
    <img src="mountains.jpg" alt="Mountains" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>

</body>
</html>
Cobalah sendiri "
Contoh lebih
Responsif Galeri
Cara menggunakan CSS3 pertanyaan media untuk membuat galeri gambar responsif.
Lanjutan: Diklik Images Modal (JS)
Contoh bagaimana menggunakan JavaScript bersama-sama dengan CSS untuk menampilkan gambar diklik di kotak modal.

❮ Sebelumnya Bab selanjutnya ❯

kode css

Membuat galeri foto dengan css

Galeri Foto

Contoh

Contoh lebih

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Periklanan

Tentang Kami

Legal

Dukungan

Social