28172 sujets

CSS et mise en forme, CSS3

[Résolu] Hauteur d'une figcaption lors du :hover

Bonjour,
J'ai le background de mes figcaptions qui sont plus hauts que les images. Ils dépassent de 10px (?) en bas. Je n'arrive pas à les adapter aux photos.
D'où cela peut-il venir ?
figure
{
	position: relative;
	display: inline-block;
	overflow: hidden;
	margin: 0;
}

figcaption
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0px;
	bottom: 50px;
	width: 100%;
	height: 100%;
	text-align: center;
	color: white;
	background-color : rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all 0.3s ease-in;
	padding-left: 1em;
	padding-right: 1em;
	font-family: 'ralewayblack', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	font-size:0.9em;
	line-height:1.1em;
}

figure:hover figcaption
{
	opacity: 1;

Merci et bon après-midi,
P.
Modérateur
Bonjour,

On n'a pas assez d'informations pour faire un diagnostic.

C'est probablement dû au fait que ton image a un display: inline ou display: inline-block (qui est la valeur par défaut pour les images). Auquel cas sous l'image il y a un espace correspondant à l'interligne entre deux lignes de textes. Figure contient donc l'image et cet espace en dessous de l'image et comme tes figcaptions doivent recouvrir toute la figure, ils dépassent de l'image.

Si tu ajoutes à ton css ...
img {display:block;}
... il n'y aura pas d'interligne sous l'image et ça pourrait tomber en marche.

Note: tu mélanges top, left, right, bottom avec width et height. Ça peut ne pas afficher ce que tu attends. Tu devrais utiliser soit top et left avec right et bottom, soit top et left avec width et height.

Amicalement,
Modifié par parsimonhi (25 Feb 2023 - 10:56)
Meilleure solution
Prévenir un modérateur
Répondre au sujet
Aller à