Hur skapa: Miniatyrbilder

Lär dig hur du skapar miniatyrbilder.

Miniatyrbilder

Miniatyrbilder är små bilder som representerar större bilder (klickas på) och identifieras vanligtvis genom deras omgivande kant:

Tulip

Hur skapa miniatyrbilder

Använd <img>-elementet och omge det med ett <a>-element. Använd kantinställningar för att ställa in bildstilen och lägg till en hover-effekt:

<style>
img {
  border: 1px solid #ddd; /* Grå kant */
  border-radius: 4px;  /* Runda kanter */
  padding: 5px; /* Några marginaler */
  width: 150px; /* Ställ in en liten bredd */
}
/* Lägg till hover-effekt (blå skugga) */
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>

Prova själv

Relaterade sidor

Tutorials:CSS-bild