28172 sujets

CSS et mise en forme, CSS3

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 :
  <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 Smiley smile
Bonjour à tous,
Pour faire simple, peut-on mettre une class à une <figure> ?
Bonne année ! Smiley smile
P.