Come creare: miniature

Impara come creare miniature.

Miniature

Le miniature sono immagini più piccole che rappresentano immagini più grandi (fatto cliccando su di esse), solitamente riconosciute dai bordi intorno a esse:

Tulip

Come creare miniature

Usa l'elemento <img> e avvolgi intorno un elemento <a>. Usa impostazioni di bordo per impostare lo stile dell'immagine e aggiungi un effetto hover:

<style>
img {
  border: 1px solid #ddd; /* Bordo grigio */
  border-radius: 4px;  /* Bordo arrotondato */
  padding: 5px; /* Alcuni spazi */
  width: 150px; /* Imposta una piccola larghezza */
}
/* Aggiungi un effetto hover (ombra blu) */
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 da solo

Pagine correlate

Tutorial:Immagine CSS