Skip to content Skip to sidebar Skip to footer
Home / CSS / Web Design

Materi 22 : Membuat Galeri Gambar dengan CSS

By Web Design Purbalingga
Membuat Galeri Gambar dengan CSS – Beberapa situs tidak hanya menampilkan berita berupa artikel saja, tapi juga ada yang menampilkan gambar di sertai secuil deskripsi di bawahnya. Setelah sebelumnya kita sudah belajar membuat menu navigasi dropdown, pada materi kali ini kita mencoba mulai mengisi web kita dengan sedikit konten.

Membuat Galeri Gambar

Berikut ini adalah tampilan galeri yang akan kita buat.
Hal yang pertama kita buat adalah tampilannya terlebih dahulu yaitu kodingan bagian body. Simak baris kodenya berikut ini
<!DOCTYPE html>
<html>
<head>
 <title>Membuat Galeri Gambar</title>
 <style type="text/css">
 
 </style>
</head>
<body>
 <div class="galeri">
     <a target="_blank" href="mountain.jpg">
       <img src="mountain.jpg" alt="Mountain" width="700" height="500">
     </a>
    <div class="desc">Deskripsi Gambar di Sini</div>
 </div>

 <div class="galeri">
     <a target="_blank" href="forest.jpg">
       <img src="forest.jpg" alt="Forest" width="700" height="500">
     </a>
    <div class="desc">Deskripsi Gambar di Sini</div>
 </div>

 <div class="galeri">
     <a target="_blank" href="aquarium.jpg">
       <img src="aquarium.jpg" alt="Aquarium" width="700" height="500">
     </a>
    <div class="desc">Deskripsi Gambar di Sini</div>
 </div>

 <div class="galeri">
     <a target="_blank" href="sea.jpg">
       <img src="sea.jpg" alt="Sea" width="700" height="500">
     </a>
    <div class="desc">Deskripsi Gambar di Sini</div>
 </div>
</body>
</html>

- <div class=”galeri”> untuk memblok atau membatasi objek yang satu dengan yang lainnya.
- <a target="_blank" href="forest.jpg"> untuk mengarahkan pengunjung saat mengklik galeri gambar kita. target=”_blank” berfungsi saat gambar di klik maka dia akan membuka tab baru pada browser. href=”forest.jpg” adalah letak folder gambar yang digunakan, jadi saat pengunjung mengklik gambar tersebut tidak menemui halaman error.
- <img src="forest.jpg" alt="Forest" width="700" height="500"> berfungsi memanggil letak folder gambar yang akan di tampilkan. Attribut width dan height adalah untuk mengatur ukuran lebar dan tingginya gambar.
Berikutnya adalah kita tambahkan sedikit css untuk mengatur lebar dan tinggi wadah gambar kita.
div.galeri {
     margin: 5px;
     border: 1px solid #ccc;
     float: left;
     width: 180px;
 }

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

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

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

- margin: 5px; berfungsi mengatur jarak antar objek dan ruang sekitarnya
- border: 1px solid #ccc; untuk memberikan border sebesar 1pixel dengar berwarna #ccc
- float: left; untuk mengatur konten kita agar bisa tersusun secara horizontal ke kiri
- width: 180px; untuk mengatur lebar box wadah gambar
- hover adalah untuk menentukan bayangan objek saat mouse di arahkan ke box wadah gambar kita
- padding: 15px; mengatur jarak antar konten dan objek bagian di dalam
- height: auto; gambar di atur dengan tinggi auto atau otomatis

Untuk membuat galeri gambar tidak terlalu sulit, karena kita hanya butuh sedikit css agar terlihat lebih menarik. Tulis pertanyaan kalian di kolom komentar jika ada yang belum di pahami dan sampai jumpa di materi berikutnya.