Galeri Gambar CSS
- Halaman sebelumnya Daftar Turun CSS
- Halaman berikutnya Image Sprite CSS
CSS dapat digunakan untuk membuat koleksi gambar.
Tulang Kuning
Tulang Merah
Tumbuhan Tumbuhan
Tumbuhan Tumbuhan
Koleksi Gambar
Bawah ini adalah koleksi gambar yang dibuat menggunakan CSS:
Contoh
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="/i/photo/tulip-yellow.jpg">
<img src="/i/photo/tulip-yellow.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Tambahkan deskripsi gambar di sini</div>
</div>
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Tambahkan deskripsi gambar di sini</div>
</div>
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Tambahkan deskripsi gambar di sini</div>
</div>
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Tambahkan deskripsi gambar di sini</div>
</div>
</body>
</html>
Beberapa contoh lain
- Pustaka gambar responsif
- Cara membuat pustaka gambar responsif menggunakan kueri media CSS, terlihat bagus di komputer meja, tablet, dan ponsel.
- Halaman sebelumnya Daftar Turun CSS
- Halaman berikutnya Image Sprite CSS
