28172 sujets

CSS et mise en forme, CSS3

Image survolée qui ne se met pas en transparence

Bonjour à vous tous,

J'ai une image et quand je la survole je voudrais qu'une transparence s'affiche sur cette image comme indiqué ci-dessous :
upload/1646983957-62242-imgfinale.jpg

Je ne comprends pas pourquoi cela ne fonctionne pas avec mon code.
Quelqu'un saurait m'expliquer où je fais l'erreur ?

Voici le code HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <link href="styles.css" type="text/css" rel="stylesheet">
    <title>Test survol image</title>
</head>
<body>
	<a href="#" class="survol_image"><img src="img/contenu-img-1.jpg" class="image_article"></a>
</body>
</html>


Voici le code CSS :

.image_article{
	border: 2px solid #000;
	margin-right: 10px;
	margin-bottom: 35px;
}

.survol_image:hover{
	background-color: hsla(358, 28%, 95%, 0.85);
}
Modérateur
Salut,

Et bien tu ne donne aucune transparence (opacity) a ton image.
.survol_image:hover{
	background-color: hsla(358, 28%, 95%, 0.85);
}

Au hover du lien tu lui donnes une couleur de fond. Donc derrière l'image.
Salut Laurent,

Pourtant, je suis les cours que j'ai en ce moment.
Et pour l'instant, on n'a vu que la propriété background-color avec des valeurs hsla.
On n'a pas encore abordé la propriété opacity.
J'ai compris que les valeurs de hsla permettaient d'opacifier une image.
J'ai même utilisé cette propriété dans le devoir précédent.
Le formateur ne veut pas que j'utilise des propriétés CSS qui ne sont pas abordées dans le cours.

J'ai compris que la couleur de fond est appliquée derrière l'image.
Dans le devoir précédent, il y avait une image de fond dans la <body> et par dessus, il y a avait un container avec un background-color blanc en valeurs hsla. Mais là je ne sais pas comment procéder pour faire la même chose sur une image importée avec <img> et mise en transparence quand on la survole.
Modifié par ObiJuanKenobi (11 Mar 2022 - 18:20)
Votre réponse est dans votre question : dans votre exercice précédent vous aviez une div par dessus l'image et c'est elle qui bénéficiait du traitement hsla().

Donc :
- soit vous mettez l'image dans une div parente et vous traitez cette div,
- soit vous positionner une div par dessus l'image... et vous traitez cette div.
Modérateur
Alors,

ObiJuanKenobi a écrit :
J'ai compris que les valeurs de hsla permettaient d'opacifier une image.

Alors, non, pas du tout désolé. hsla c'est une des façon d'écrire une couleur. Pour écrire une couleur (on parle bien de couleur ici, pas d'images hein) tu peux utiliser entre autres :
- Hexadecimal colors
- Hexadecimal colors with transparency
- RGB colors
- RGBA colors
- HSL colors
- HSLA colors
- Predefined/Cross-browser color names

source : https://www.w3schools.com/cssref/css_colors_legal.asp

RGB pour Red Green Blue
HSL pour Hue-Saturation-Lightness
Le A peut se rajouter avec une argument en plus entre 0 et 1 ou 0% et 100% pour définir un niveau d'opacité de la couleur.

Donc, comme tu peux le voir, rien a voir avec l'opacité de l'image.

ObiJuanKenobi a écrit :
J'ai même utilisé cette propriété dans le devoir précédent.

Ok il serait intéressant de s'en inspirer du coup.

ObiJuanKenobi a écrit :
Le formateur ne veut pas que j'utilise des propriétés CSS qui ne sont pas abordées dans le cours.

Ok ca se comprend pas de soucis (même si je trouve ca étrange de faire faire du code qui ne sera pas adapté car faisable hyper simplement avec des propriété adaptée mais soit..)

ObiJuanKenobi a écrit :
Dans le devoir précédent, il y avait une image de fond dans la &lt;body&gt; et par dessus, il y a avait un container avec un background-color blanc en valeurs hsla.
Ah donc en fait tu le savais déjà et tu me trollais pour l'opacité Smiley lol Quand tu dis "une image de fond" c'était un background-image ?

ObiJuanKenobi a écrit :
Mais là je ne sais pas comment procéder pour faire la même chose sur une image importée avec &lt;img&gt; et mise en transparence quand on la survole.
Et bien exactement de la même façon : "par dessus, il y a avait un container avec un background-color blanc en valeurs hsla." C'est tout pareil.
J'ai finalement utilisé la propriété opacity que j'ai appliqué à une classe associée au survol de <img>. Le formateur ne va pas être content. Il aurait voulu que j'utilise le positionnement absolu et relatif parce que opacity n'est pas cité dans les cours actuels.

C'était trop compliqué pour moi, je ne suis pas à l'aise avec le CSS. J'ai préféré opter pour cette solution sinon je n'avance pas. De toutes façons, je m'en fous un peu d'avoir un 0/20, la formation que je suis n'est pas sanctionnée par un examen pour obtenir un diplôme. Ce que je veux c'est apprendre, pratiquer et peut importe d'avoir un 0 ou un 20/20.

J'ai compris que pour utiliser background-color: hsla(); j'aurais dû placer cette propriété sur un <div> parent de <img>. Mais la difficulté que je rencontrais c'est que ça ne marchait pas quand je ciblais la class ou quand je ciblais la balise <img>.

Alors, j'ai arrêté les frais et j'ai opté pour la formule la plus simple qui marche et le schmilblick avance.

Que le code soit avec vous !
Modérateur
Wow, alors

ObiJuanKenobi a écrit :
Ce que je veux c'est apprendre, pratiquer et peut importe d'avoir un 0 ou un 20/20.

Ce que tu fais ici c'est donc tout l'inverse. Tu abandonnes plutôt que d'apprendre. Du coup ton beau discours semble bien fade désolé de te le dire comme ça...

ObiJuanKenobi a écrit :
Alors, j'ai arrêté les frais et j'ai opté pour la formule la plus simple qui marche et le schmilblick avance.

Le schmilblick avance d'un pas sur le problème suivant et te fera reculer de cinq pas quand tu rencontreras une solution similaire plus tard, pourtant basique.

A toi de voir mais franchement abandonner comme ça c'est vraiment pas une bonne solution.

On est là pour t'épauler avec plaisir alors lâche pas... Smiley smile

Je te relance sur la bonne piste libre a toi d'abandonner ou bien de persister encore un peu pour "apprendre, pratiquer" comme tu le souhaites.

ObiJuanKenobi a écrit :
J'ai compris que pour utiliser background-color: hsla(); j'aurais dû placer cette propriété sur un &lt;div&gt; parent de &lt;img&gt;. Mais la difficulté que je rencontrais c'est que ça ne marchait pas quand je ciblais la class ou quand je ciblais la balise &lt;img&gt;.

Et bah on va régler ça.
ObiJuanKenobi a écrit :
Il aurait voulu que j'utilise le positionnement absolu et relatif parce que opacity n'est pas cité dans les cours actuels.

En plus tu sais exactement ce que ton prof veut et ce qu'il faut faire. J'ai vraiment l'impression que t'as juste la flemme de te racler un poil la soupière pour finir le truc, ca m'énerve encore plus ! haha Smiley lol

Alors du coup le principe : T'as un lien avec une image dedans. L'idée c'est de recouvrir ton image avec un élément en blanc transparent. Pour le recouvrir c'est bien la position absolute. Je te donne une piste de structure HTML pour ta mâcher le premier pas :

<a href="#" class="lien">
     <span class="blanctransparent"></span>
     <img class="image" src="img/contenu-img-1.jpg">
</a>

Je te laisse faire le CSS qui va bien. Si ca marche pas viens ici je t'expliquerai tout avec plaisir.

Et comme t'as l'air de bien aimer les grandes idées profondes et inspirante :

upload/1647032663-42161-d064072fa7c4e129f4396a2578ca8.jpg

J'attend ton CSS Smiley lol
Voila ce que j'ai fait mais je rencontre deux problèmes que je n'arrive absolument pas à résoudre.

1er problème :
Je ne comprends pas pourquoi <figcaption>, qui se superpose sur l'image, ne prend pas exactement les mêmes dimensions que l'image en arrière plan. Pourtant, j'ai placé les mêmes width et height.

Voilà une capture écran de ce que j'obtiens (si on regarde les coins, on voit un décalage de 2 ou 3 pixels) :
upload/1647241195-62242-image-ok.jpg

2ème problème :
Quand je cherche à centrer en hauteur les 3 éléments textes de <figcaption> (avec la propriété line-height) cela me décale tout vers le bas.

Voici le code HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <link href="styles.css" type="text/css" rel="stylesheet">
    <title>Se perfectionner en HTML/CSS</title>
</head>
<body>
	<figure>
		<a href="#">
			<img src="img/saut.jpg" title="Personne sautant" alt="Personne sautant" class="image_saut">
			<figcaption>
				<p>Le saut</p>
				<p>La chute du sot sans son seau</p>
				<p class="bouton_sauter">Sauter</p>
			</figcaption>
		</a>
	</figure>
</body>
</html>


Voici le code CSS :

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.image_saut{
	border: 2px solid #000;
		width: 480px;
		height: 480px;
}

figure{
	border: 2px solid #000;
	float: left;
	width: 480px;
	height: 480px;
	position: relative;
}

figcaption{
	text-align: center;
	background-color: #444;
	width: 480px;
	height: 480px;
	/*line-height: 180px;*/
	position: absolute;
	background: rgba(10,10,10,0.6);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

a{
	color: #fff;
	text-decoration: none;
}

figure:hover figcaption{
	display: none
}

.bouton_sauter{
	background-color: #0c7f06;
	width: 100px;
	padding: 10px 0;
	margin: 0 auto;
}

Modifié par ObiJuanKenobi (14 Mar 2022 - 08:02)
Modérateur
Salut salut !

Alors problème 1 c'est pas grand chose. En gros tu as un border de 2px sur ton <figure> et sur ton <img>. En plus de ca tu as forcé la taille des deux a 480px.
Un contenu, ici ton image, va se placer dans le<figure> à l'intérieur des border ET tu as utilisé box-sizing: border-box; ce qui va comprendre les border dans la taille.
Donc en fait ton <figure> de 480px n'a de disponible que 476px. Et l'image qui fait 480px se positionnera après le border donc décalée de 2px en haut et en bas et dépassera de 2px à droit et en bas.
Pour le corriger,
- soit tu supprime le border de figure pour mettre 4px sur ton img
- soit tu laisses ton image s'adapter au conteneur
- soit tu laisses de conteneur s'adapter à l'image

Problème 2
line-height va modifier la hauteur d'une ligne de texte donc tes éléments vont juste grossir. Pour centrer verticalement le flex fait ca plutôt proprement :
figcaption {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
Merci Laurent pour la solution du centrage des 3 <p> dans <figcaption>. Merci aussi pour les explications sur le pourquoi du décalage de <figcaption> sur <img>.

Le formateur ne va pas apprécier que je lui propose des propriétés qui ne sont pas abordées dans le cours mais je m'en fous. J'ai déjà vu ces propriétés dans un précédent travail sans rapport avec les cours de HTML/CSS. Je n'ai pas beaucoup de temps à consacrer à l'apprentissage du CSS parce que je travaille en plus de mes cours et je veux avancer. sinon je prends du retard. Tant pis, j'apprendrais plus tard quand j'aurai plus de temps.

Je vais continuer ce devoir, il me reste encore un formulaire à faire contenant 4 champs <imput> et un bouton de validation ainsi que le pied de page puis je livre le devoir.
Modifié par ObiJuanKenobi (15 Mar 2022 - 07:06)
Sujet clos
Aller à