Texte apparaissant lors du :hover

Bonjour et bonne année !!!!

J’ai un petit souci : je souhaiterais que des textes apparaissent sur mes images lors du :hover, mais ces images sont d’une taille différente. Je ne peux donc pas fixer une taille à <figure>

Peut-on donner une classe à une <figure> ?

Ci-dessous mes 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}

et mon HTML :

  <figure>
   <img src="images/binet.jpg" class="image1" alt="affiche"/></a>
    <figcaption>
      <strong>Binet</strong>
    </figcaption>
  </figure>

Merci pour votre aide et encore tous mes voeux

Salut,

Qu’est-ce qui pose problème exactement ? Quel résultat cherches-tu à obtenir ?

Je vois que tu appliques un float à l’image… pourquoi ? En faisant ça tu la sors du flux de calcul, alors que sans ça ton figure pourrait s’adapter à son contenu.

Salut viki53,

J’ai une grosse colonne de texte, et des images viennent dessus en dépassant à droite ou à gauche. Puis-je appliquer la classe .image à <figure> ? Les CSS de "image" étaient présentes avant que je veuille appliquer un effet au:hover. Cela marchait parfaitement (float, size…). Mais c’était avant

Merci pour ton aide,

P.

Tu peux appliquer une class à n’importe quel élément.

Reste à savoir la priorité des règles appliquées, en fonction du sélecteur…

Je n’ai vu cela nulle part sur le net. J’ai bien (beaucoup) cherché… je tente avant de mettre le topic en résolu ! Merci beaucoup viki53

Bonne fin de journée !

Ça veut bien dire ça : c’est un attribut global, qui peut donc s’appliquer n’importe où.

Merci

ça fonctionne, c’est GENIAL. Merci viki53

J’ai donc mon HTML :

  <figure class="image1">
   <img src="images/binet.jpg" alt="affiche" width="500">
    <figcaption>
      <strong>Binet</strong>
    </figcaption>
  </figure>

Petite question : comment gérer le width avec les médias queries ? Dois-je rajouter une classe à l’image pour le "width="500" ?

Encore merci et bon week-end !

Comment ça, gérer le width ?

Tu peux utiliser du CSS, plutôt qu’un attribut HTML (méthode peu recommandée, soit dit en passant), si c’est ça que tu demandes.

Salut viki53

Donc rajouter une classe. C’est ce que je pensais

Merci et bonne fin de week-end.