Background-color d'un figcaption qui dépasse de la figure.

Bonjour,

J’ai des images avec figcaption (background-color et texte). Tout fonctionne

Mais voilà, j’ai besoin de figcaptions différentes pour une autre partie de la page qui a un padding-right de 40 vw. J’arrive à "caler" le texte mais pas le padding-right de backround-color qui reste à 0

Voici les CSS :

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

figcaption
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0px;
	bottom: 1000px;
	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:2vmin;
	font-size:1.5vm;
	line-height: 1.2em;
	pointer-events: none;
}

figure:hover figcaption
{
	opacity: 1;
}
.image_rock
{
	width: 100vw;
	padding-right:40vw;
}

.legende
{
	padding-right:40vw;
}

et le HTML :

<figure>
    <img src="./images/shoes.jpg" class="image_rock" alt="" >
    <figcaption class="legende">
        C’est dans le quartier huppé de l’ouest de Londres qu’une
        frange de la jeunesse, qui écoute du Modern Jazz, attache
        une grande importance à sa tenue vestimentaire à la pointe
        de la mode
    </figcaption>
</figure>

Où ai-je encore fauté ? J’ai encore et toujours tenté plein de choses mais…

Merci pour votre aide et bon week-end,

PLS

@Amaury — Correction de l’intégration du code HTML.

Hello, je ne vois pas de figcaption dans ton HTML.

Pour info un élément img ne peut pas vraiment avoir de padding (je pense à ton .image_rock) : une image se suffisant à elle-même, elle ne contient rien.

Bonjour viki53

Merci pour l’info

Il y a bien la figcaption dans le code laiissé, mais il était très mal indenté.

Le voici :

<figure><img src="./images/shoes.jpg" class="image_rock" alt="" >  <figcaption class="legende">C’est dans le quartier huppé de l’ouest de Londres qu’une frange de la jeunesse, qui écoute du Modern Jazz, attache une grande importance à sa tenue vestimentaire à la pointe de la mode</figcaption></figure>

Encore merci et bonne fin de week-end

PLS

Je ne suis pas sûr de comprendre ce que «le padding-right de background-color» signifie. Je suppose que tu voudrais que le texte ET la couleur de fond soient décalés ensemble de 40vw ? Dans ce cas il ne faut pas utiliser un padding (par définition le padding est à l’intérieur de la boîte, donc «par-dessus» la couleur de fond).

As-tu essayé avec margin-right

EDIT: Quoique je vois maintenant que tu utilises position: absolute donc ça va être plus compliqué que ça sans doute…

EDIT²: J’ai essayé dans un navigateur. C’est pas terrible, mais sans savoir précisément ce que tu veux, c’est difficile de t’aider.

En tout cas, à mon avis, il faut se poser la question de la pertinence de mettre la largeur de l’image à 100vw tout en positionnant la légende avec bottom: 1000px : ça risque de poser problème pour certaines tailles d’écran/de fenêtre.

Par ailleurs, je pense qu’il ne faut pas utiliser les unités de viewport (vw/vh/vmin/vmax) pour font-size, car cela rend le zoom inopérant sur le texte, ce qui est très mauvais pour l’accessibilité.

Bonjour Ixnv,

Merci pour tes conseils (bottom, font-size).

Pour ce qui est du margin, j’ai testé et la photo apparaît à 100% de sa taille réelle, ce qui n’est pas le cas avec un padding. Je t’envoie deux captures. Avec le padding, le résultat est correct, demeure le problème du background-color.

Pour répondre à ta question, oui, le but est que les deux (background et image) soient parfaitement l’un dessus l’autre.

Encore merci,

PLS![]

Hello,

J’ai juste créé un conteneur avec width: 100% avec l’image à l’intérieur.

Tout est OK

Bonne journée !

Pourquoi ne pas avoir directement mis l’image en background plutôt que dans le HTML ? Elle a un intérêt sémantique ?

Bonjour viki,

Oui, j’avais trouvé une solution moins loin d’être la meilleure.

Maintenant, mon code ressemble à ça :

<figure><img src="./images/Brighton.jpg" alt="Brighton" class="responsive">    <figcaption>Texte</figcaption></figure></figure>

Pourquoi pas de background ? J’étais parti sur une classe car plusieurs images concernées.

A-je bon ?

Merci et bonne fin de journée

Tout dépend du besoin : si le but de l’image est de servir de décoration en fond, il n’y a aucun intérêt à la mettre dans le HTML puisque sans intérêt pour le contenu.

Si tu as plusieurs blocs à décorer de la même façon ils peuvent avoir une class commune pour le styles partagés (positionnement de l’image, couleur, etc.) et une class ou un id chacun pour leur appliquer une image différente.

Il faut bien garder en tête que HTML = contenu et CSS = mise en forme. Le HTML doit pouvoir être parcouru sans le CSS correspondant et garder son sens (sans embarquer d’éléments dispensables idéalement).