CSS bir resim galerisi oluşturmak için kullanılabilir.
Burada görüntünün bir açıklama ekleyin
Burada görüntünün bir açıklama ekleyin
Burada görüntünün bir açıklama ekleyin
Burada görüntünün bir açıklama ekleyin
Resim Galerisi
Aşağıdaki resim galerisi CSS ile oluşturulur:
Örnek
<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>
Kendin dene " 
Diğer Örnekler
Duyarlı Resim Galerisi
Nasıl bir tepki resim galerisi oluşturmak için CSS3 medya sorgularını kullanmak.
Gelişmiş: Tıklanabilen Modal Görüntüler (JS)
kalıcı kutuya tıklandığında görüntüler gösterilecek CSS ile birlikte JavaScript nasıl kullanılacağına ilişkin bir örnek.