Come creare: titolo sovrapposto all'immagine

Impara a creare un titolo sovrapposto all'immagine quando il mouse è sopra.

Come creare un titolo sovrapposto all'immagine

Primo passo - Aggiungi HTML:

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">Il mio nome è John</div>
</div>

Secondo passo - Aggiungi CSS:

* {box-sizing: border-box}
/* Contenitore necessario per posizionare il sovrapposto. Modifica la larghezza secondo necessità */
.container {
  posizione: relativo;
  larghezza: 50%;
  larghezza massima: 300px;
}
/* Render l'immagine responsive */
.image {
  visualizzazione: blocco;
  larghezza: 100%;
  altezza: auto;
}
/* Effetto sovrapposto - sopra il contenitore e l'immagine */
.overlay {
  posizione: assoluto;
  inferiore: 0;
  sfondo: rgb(0, 0, 0);
  sfondo: rgba(0, 0, 0, 0.5); /* Nero trasparente */
  colore: #f1f1f1;
  larghezza: 100%;
  trasformazione: .5s facilità;
  opacità:0;
  colore: bianco;
  dimensione del carattere: 20px;
  margine: 20px;
  allineamento del testo: centro;
}
/* Quando il mouse è sopra il contenitore, appare gradualmente il titolo sovrapposto */
.container:hover .overlay {
  opacità: 1;
}

Prova tu stesso

Pagine correlate

Guida:Immagine CSS

Guida:Come creare l'effetto di sovrapposizione di immagine hover