CSS może być wykorzystywane do tworzenia galerii obrazu.
Dodaj opis obrazu tutaj
Dodaj opis obrazu tutaj
Dodaj opis obrazu tutaj
Dodaj opis obrazu tutaj
Galeria obrazów
Poniższa galeria obraz jest tworzony z CSS:
Przykład
<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>
Spróbuj sam " 
Więcej przykładów
Responsive Galeria zdjęć
Jak korzystać z CSS3 zapytań o media, aby stworzyć elastyczne galeria zdjęć.
Zaawansowane: Klikalne modalne Obrazy (JS)
Przykładem, jak używać JavaScript wraz z CSS do wyświetlania obrazów kliknął w pudełku modalnej.