Survol sur image avec texte et lien Survol sur image avec texte et lien

Voici une technique moderne avec le display:grid pour faire une superposition d’un texte sur une image, le tout dans un lien.

Première base de départ, un lien avec dedans une image et un texte dans une span.

<a href="https://jenseign.com">
  <img src="…" alt="jenseign">
  <span>jenseign.com</span>
</a>

Pour réserver l’effet à certains éléments, on va rendre plus spécifiques les liens en ajoutant une class. Je propose de nommer mes liens spéciaux ‘.a‑img-txt’.

<a class="a-img-txt" href="https://jenseign.com">
  <img class="a-img" src="…" alt="jenseign">
  <span class="a-txt">jenseign.com</span>
</a>

Pour le CSS, le lien a pour display:grid et ses enfants (img et span) occupent la même aire (col 1/-1 et row 1/-1), automatiquement ils se superposeront.
On ajoute l’effet avec :hover, opacity et transition.
On centre le texte avec le combo display:flex; align-items:center; justify-content:center;

.a-img-txt{
  display:grid; 
}
 
/* les enfants se superposent */
.a-img-txt>*{
  grid-area:1/1/-1/-1; 
  /* raccourci pour grid-row et grid-column */
}
 
/* le texte */
.a-txt{
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  opacity:0;
  transition:opacity .8s;
}
 
/* les couleurs c1 et c2 */
.c1{
    background:#ff6600cc; /* avec alpha */
}
 
.c2{
    background:#6600ffcc; /* avec alpha */
}
 
/* le survol */
.a-txt:hover{
  opacity:1;
}
 
/* la déco */
body{
  background:#222;
  margin:24px;
  font-family:sans-serif;
  font-size:21px;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-gap:24px;
  gap:24px;
}
 
img{
  max-width:100%;
  height:auto;
}
a{
  text-decoration:none;
}

Le CodePen

See the Pen survol d’image et texte + lien by Benoît Wimart (@benoitwimart) on CodePen.