5568 sujets

Sémantique web et HTML

[Résolu] Figure et figcaption

Bonjour,
Je n'arrive pas à mettre des figcaptions à mes items Smiley hum .
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 Smiley cligne
P.
Modérateur
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.
Modérateur
Pwah je comprend pas cette phrase :
PLGPPUR a écrit :
Je tente de faire apparaître une opacité et un &lt;h1&gt; lors du :hover


Tu veux faire apparaitre le h1 au survol de l'image ? Pourquoi tu mets pas ces infos dans la figcaption plutot que dans un h1 ?

Sinon il y a encore des erreur dans ton code (manque un <, double guillemet en fin d'url...) mais une fois corrigé ca a l'air de marche https://jsfiddle.net/ry61j9ws/

Il manque juste une box-sizing:border-box; sur ton figcaption pour pas qu'il fasse 100%+40px de haut mais seulement 100% en gardant 40px de padding top.
Modifié par _laurent (15 Sep 2022 - 14:59)
Meilleure solution
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 Smiley confus
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 Smiley biggrin
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 Smiley confused ?
Encore merci,
P.
Modifié par PLGPPUR (15 Sep 2022 - 15:34)
Stupide Smiley confused
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 Smiley murf
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) Smiley bawling
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)
Sujet clos
Aller à