[Résolu] Figure et figcaption

Bonjour,
Je n'arrive pas à mettre des figcaptions à mes items .
Voici mon HTML :

<figure>	
<div class="grid__item" data-size="1800x1224">
<a href="img/original/Binet.jpg" class="img-wrap"><img src="img/thumbs/BinetL.jpg" alt="img04" /></a>  
<figcaption><strong>Neal Adams &amp; Tom Grindberg</strong></figcaption>
</figure>

Et pour info mes CSS :

figure {
	position: relative;
	display: inline-block;
	overflow: hidden;
}
figcaption {
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: -100%;
	cursor: pointer;
	-moz-transition: all .6s;
	-webkit-transition: all .6s;
	-o-transition: all .6s;
	transition: all .6s;
	text-align: center;
	vertical-align: text-bottom;
	color: #fff;
	background-color: rgba(0,51,0,0.6);
	padding-top: 40px;
	font-family: "OpenSans Regular";
}

Merci pour votre aide
P.

Salut,


Ca veut dire quoi "Je n'arrive pas à mettre des figcaptions" ? Ils n'apparaissent pas ou ils apparaissent mal ?

Tu as un div ouverte non fermée en plein milieu au passage.

Bonjour Laurent,
Je tente de faire apparaître une opacité et un <h1> lors du :hover.
Mon dernier test (sans succès) :

div class="grid__item" data-size="1800x1224">
<figure>
<a href="img/original/Binet.jpg""><img src="./img/original/Binet.jpg" alt="SMV" /></a>
<figcaption>
<strong>SMV</strong>
</figcaption>
</figure>
<div class="description description--grid">
<h1>Paris, Casino de Paris. 27 Octobre 2008</h1>
</div></div>

et j'ai oublié de mettre dans mon premier message ces CSS :

figure:hover figcaption {
	bottom: 0;
}

Merci pour ton aide et bon après-midi,
P.

Bonjour,
je ne sais pas si c'est en recopiant ton code pour le site, mais cette fois, tu n'a pas ouvert la div, tout en haut de ton code !
Tu devrais mettre une class à "SMW" ou à "Neal Adams &amp; Tom Grindberg"
Par exemple :

<figcaption class="figCap">SMW</figcaption>

Ça te donnerait plus de souplesse pour agir sur SMW.
Je suis loin de connaître tout en css/html mais je suis étonné que l'on puisse mettre un hover sur figcaption
Le code est un peu confus dans l'ensemble. Où l'as-tu pris ?
Ah, je vois que j'ai été grillé par Laurent, à quelques minutes près, qui a pointé aussi d'autres problèmes.
Modifié par Bongota (15 Sep 2022 - 15:07)

J'en apprends une aujourd'hui, on peut mettre un hover sur figcaption. Merci pour ma connaissance.
En tous cas, le code corrigé par Laurent va t'aider.

Problème RESOLU
Merci Laurent et Bongota. SUPER !!!!
J'ai un peu changé le code (qui fonctionne parfaitement), mais maintenant, j'ai la typo (alt) qui apparaît aussi... sans le :hover :

figure {
	position: relative;
	display: inline-block;
	overflow: hidden;

}
figcaption {
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	cursor: pointer;
	-moz-transition: all .6s;
	-webkit-transition: all .6s;
	-o-transition: all .6s;
	transition: all .6s;
	text-align: center;
	color: #fff;
	padding-top: 40px;
	font-family: "OpenSans Regular";
}
figure:hover figcaption {
	background-color: black;
	bottom: 0;

}

Où ai-je fauté (la première et seconde fois) excepté les erreurs de code ?
Encore merci,
P.
Modifié par PLGPPUR (15 Sep 2022 - 15:34)

Stupide
Je voulais dire, comment faire pour la figcaption apparaisse en même temps que le background: color: black ?
Ce n'est peut-être plus le même topic
Désolé et... merci !

Il y a ça qui fonctionne :

figure {
	position: relative;
	display: inline-block;
	overflow: hidden;
}
figcaption {
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: -100%;
	cursor: pointer;

	text-align: center;
	vertical-align: text-bottom;
	color: 
#fff;
	background-color: 
rgba(0,51,0,0.6);
	padding-top: 40px;
	font-family: "OpenSans Regular";
}
figure:hover figcaption {
	bottom: 0;
}

mais je pense que ce n'est pas très "académique" et je n'ai pas de fondu (opacité 0 à 0.7)
Merci

Bonjour Laurent, bonjour Bongota,
Je ne dois pas être loin !????!

figure {
	position: relative;
	display: inline-block;
	overflow: hidden;

}
figcaption {
	width: 100%;
	height: 100%;
	position: absolute;
	cursor: pointer;
	opacity: 0;
	transition: opacity 5s;  
	text-align: center;
	vertical-align: text-bottom;
	color: #fff;
	background-color: rgba(0,51,0,0.6);
	padding-top: 40px;
	font-family: "OpenSans Regular";
}
figure:hover figcaption {
	opacity: 1;
}

Bonne journée,
P.
Modifié par PLGPPUR (16 Sep 2022 - 06:17)