Hoe te maken: Afbeelding overlay titel

Leer hoe je een afbeelding overlay titel maakt bij mouse hover.

Hoe een overlay titel op een afbeelding te maken

Eerste stap - Voeg HTML toe:

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">Mijn Naam is John</div>
</div>

Tweede stap - Voeg CSS toe:

* {box-sizing: border-box}
/* Container waarin de overlay moet worden geplaatst. Pas de breedte aan naar behoefte */
.container {
  positie: relatief;
  breedte: 50%;
  max-breidte: 300px;
}
/* Maakt het beeld responsief */
.image {
  weergave: blok;
  breedte: 100%;
  hoogte: auto;
}
/* Overlapping effect - ligt bovenop de container en het beeld */
.overlay {
  positie: absoluut;
  onderkant: 0;
  achtergrond: rgb(0, 0, 0);
  achtergrond: rgba(0, 0, 0, 0.5); /* Zwart doorzichtig */
  kleur: #f1f1f1;
  breedte: 100%;
  overgang: 0.5s gemakkelijk;
  透明度:0;
  kleur: wit;
  lettergrootte: 20px;
  padding: 20px;
  tekst-uitlijning: center;
}
/* Wanneer je de muis over het container plaatst, vervaagt de titel van de overlay */
.container:hover .overlay {
  透明度: 1;
}

Probeer het zelf

Gerelateerde pagina's

Handleiding:CSS image

Handleiding:How to create image overlay hover effect