Bonsoir,
Je souhaite donner un texte à mes images lors du :hover, mais le width de chaque images est différent. Donc je ne peux donner un width à la div <figure>.
Un exemple :
et les CSS :
les css de image1 ne s'appliquent pas car <figure> est le parent.
Comment faire pour appliquer des CSS à chaque <figure> différentes ?
Bon réveillon, amusez-vous bien
Je souhaite donner un texte à mes images lors du :hover, mais le width de chaque images est différent. Donc je ne peux donner un width à la div <figure>.
Un exemple :
<figure>
<img src="images/binet.jpg" class="image1" alt="affiche"/></a>
<figcaption>
<strong>Binet</strong>
</figcaption>
</figure>
et les CSS :
figure {
position: relative;
display: inline-block;
overflow: hidden;
}
figcaption {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
cursor: pointer;
text-align: center;
vertical-align: text-bottom;
color: black;
background-color : rgba(0,0,0,0.5);
padding-top: 30%;
font-family: 'clovis_cheuryregular', Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
opacity: 0;
color: white;
transition: opacity 1s ease;
font-size: 3em;
}
figure:hover figcaption {
opacity: 1;
}
.image1{float:left;margin-left:-10vw;width:50vw}
les css de image1 ne s'appliquent pas car <figure> est le parent.
Comment faire pour appliquer des CSS à chaque <figure> différentes ?
Bon réveillon, amusez-vous bien