CSS kann verwendet werden, um eine Fotogalerie zu erstellen.
Fügen Sie eine Beschreibung des Bildes hier
Fügen Sie eine Beschreibung des Bildes hier
Fügen Sie eine Beschreibung des Bildes hier
Fügen Sie eine Beschreibung des Bildes hier
Bildergalerie
Das folgende Bild Galerie wird mit CSS erstellt:
Beispiel
<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>
Versuch es selber " 
Mehr Beispiele
Responsive Bildgalerie
Wie CSS3 Media Queries zu verwenden, um eine ansprechende Fotogalerie zu erstellen.
Advanced: anklickbare Modal Bilder (JS)
Ein Beispiel, wie JavaScript zu verwenden zusammen mit CSS klickten Bilder in einem modalen Feld angezeigt werden soll.