Je suggère d'utiliser un pseudo-élément à la place de l'élément de recouvrement. En effet, les pseudo-éléments ne peuvent pas être ajoutés aux éléments fermés. img vous devrez toujours envelopper l'élément img élément, cependant.
EXEMPLE CONCRET ICI -- EXEMPLE AVEC TEXTE
<div class="image">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>
Comme pour le CSS, définissez dimensions optionnelles sur le .image et le positionner de manière relative. Si vous souhaitez obtenir une image réactive, il suffit d'omettre les dimensions et cela fonctionnera toujours. (exemple) . Il convient simplement de noter que les dimensions doivent se trouver sur l'élément parent, et non sur l'élément d'origine. img l'élément lui-même, voir .
.image {
position: relative;
width: 400px;
height: 400px;
}
Donnez à l'enfant img un élément d'une largeur de 100% du parent et ajoutez vertical-align:top pour corriger les problèmes d'alignement de la ligne de base par défaut.
.image img {
width: 100%;
vertical-align: top;
}
Comme pour le pseudo-élément, définissez une valeur de contenu et positionnez-le de manière absolue par rapport à l'élément .image élément. Une largeur/hauteur de 100% veillera à ce que cela fonctionne avec des img dimensions. Si vous voulez faire une transition de l'élément, définissez une opacité de 0 et 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 1 lors du survol du pseudo-élément afin de faciliter la transition :
.image:hover:after {
opacity: 1;
}
RÉSULTAT FINAL ICI
Si vous voulez ajouter du texte au survol :
Pour l'approche la plus simple, il suffit d'ajouter le texte comme élément du pseudo-élément. content valeur :
EXEMPLE ICI
.image:after {
content: 'Here is some text..';
color: #fff;
/* Other styling.. */
}
Ce devrait fonctionnent dans la plupart des cas ; toutefois, si vous avez plusieurs img vous ne souhaitez peut-être pas que le même texte apparaisse au survol. Vous pourriez donc définir le texte dans un data-* et donc avoir un texte unique pour chaque img élément.
EXEMPLE ICI
.image:after {
content: attr(data-content);
color: #fff;
}
Avec un content valeur de attr(data-content) le pseudo-élément ajoute le texte de l'élément .image de l'élément data-content attribut :
<div data-content="Text added on hover" class="image">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>
Vous pouvez ajouter un peu de style et faire quelque chose comme ça :
EXEMPLE ICI
Dans l'exemple ci-dessus, le :after sert de superposition noire, tandis que le pseudo-élément :before Le pseudo-élément est la légende/le texte. Comme les éléments sont 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;
}
