Je suggère d'utiliser un pseudo élément à la place de l'élément de superposition. Étant donné que les pseudo éléments ne peuvent pas être ajoutés sur des imgéléments inclus , vous devrez quand imgmême encapsuler l' élément.
EXEMPLE EN DIRECT ICI - EXEMPLE AVEC TEXTE
<div class="image">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>
Comme pour le CSS, définissez des dimensions optionnelles sur l' .imageélément et positionnez-le de manière relative. Si vous visez une image responsive, omettez simplement les dimensions et cela fonctionnera toujours (exemple) . Il est juste intéressant de noter que les dimensions doivent être sur l'élément parent plutôt que sur l' imgélément lui-même, voir .
.image {
position: relative;
width: 400px;
height: 400px;
}
Donnez à l' imgélément enfant une largeur de 100%du parent et ajoutez vertical-align:toppour résoudre les problèmes d'alignement de la ligne de base par défaut.
.image img {
width: 100%;
vertical-align: top;
}
Quant au pseudo élément, définissez une valeur de contenu et positionnez-le absolument par rapport à l' .imageélément. Une largeur / hauteur de 100%garantira que cela fonctionne avec des imgdimensions variables . Si vous souhaitez effectuer la transition de l'élément, définissez une opacité de 0et ajoutez les propriétés / valeurs de transition.
.image:after {
content: '\A';
position: absolute;
width: 100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity: 0;
transition: all 1s;
-webkit-transition: all 1s;
}
Utilisez une opacité de 1lors du survol du pseudo élément afin de faciliter la transition:
.image:hover:after {
opacity: 1;
}
FIN DU RÉSULTAT ICI
Si vous souhaitez ajouter du texte au survol:
Pour l'approche la plus simple, ajoutez simplement le texte comme valeur du pseudo élément content:
EXEMPLE ICI
.image:after {
content: 'Here is some text..';
color: #fff;
/* Other styling.. */
}
Cela devrait fonctionner dans la plupart des cas; cependant, si vous avez plusieurs imgéléments, vous ne voudrez peut-être pas que le même texte apparaisse au survol. Vous pouvez donc placer le texte dans un data-*attribut et donc avoir un texte unique pour chaque imgélément.
EXEMPLE ICI
.image:after {
content: attr(data-content);
color: #fff;
}
Avec une contentvaleur de attr(data-content), le pseudo élément ajoute le texte de l' attribut de l' .imageélément data-content:
<div data-content="Text added on hover" class="image">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>
Vous pouvez ajouter du style et faire quelque chose comme ceci:
EXEMPLE ICI
Dans l'exemple ci-dessus, le :afterpseudo élément sert de superposition noire, tandis que le :beforepseudo élément est la légende / le texte. Les éléments étant indépendants les uns des autres, vous pouvez utiliser un style distinct pour un positionnement plus optimal.
.image:after, .image:before {
position: absolute;
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:after {
content: '\A';
width: 100%; height:100%;
top: 0; left:0;
background:rgba(0,0,0,0.6);
}
.image:before {
content: attr(data-content);
width: 100%;
color: #fff;
z-index: 1;
bottom: 0;
padding: 4px 10px;
text-align: center;
background: #f00;
box-sizing: border-box;
-moz-box-sizing:border-box;
}
.image:hover:after, .image:hover:before {
opacity: 1;
}