Anleitung - Miniaturansicht
Erfahren Sie, wie Sie ein Miniaturbild erstellen.
Vorschaubild
Ein Thumbnail ist ein kleines Bild, das ein größeres Bild darstellt (wenn darauf geklickt wird) und oft an einem Rahmen erkennbar ist:
So erstellen Sie ein Miniaturbild
Verwenden Sie ein <img>-Element und umschließen Sie es mit einem <a>-Element. Gestalten Sie das Bild mit einem Rahmen und fügen Sie einen Hover-Effekt hinzu:
Beispiel
<style>
img {
border: 1px solid #ddd; /* Gray
border */
border-radius: 4px; /* Rounded border */
padding: 5px; /* Some padding */
width: 150px; /* Set a
small width */
}
/* Add a hover effect (blue shadow) */
img:hover
{
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
<body>
<a target="_blank" href="img_forest.jpg">
<img
src="img_forest.jpg" alt="Forest">
</a>
</body>
Besuchen Sie unser Tutorial zu CSS-Bildern, um mehr über das Gestalten von Bildern zu erfahren.