28172 sujets

CSS et mise en forme, CSS3

Afficher des images en survolant des liens

Bonjour
j'ai épluché différents sites hélas sans trouver de solution. Je bloque sur du html/css

Le principe est de faire afficher une image et un texte correspondants à chaque lien d'une page. Pour faire afficher le texte il n'y a pas de soucis. En revanche les images sont moins réceptrices à être affichées en :hover.

Pour le moment je mets toutes les images en opacity: 0 (problème la boite est conservée contrairement au display:none, mais avec ce dernier je ne sais pas comment refaire apparaître l'image) et je les place à droite en float:right.
Puis lors d'un survol d'un lien je veux faire apparaitre l'image correspondante dans la div.imageHover qui est vide et avec les mêmes propriétés que les images (taille, border-radius, etc). Mais à chaque tentative l'image ne s'affiche ou il y a conflit car il considère que l'image est en fond donc cela varie entre du :hover et du non :hover du lien.

Pour finir j'ai fini par faire ce code suivant. Le souci principal est qu'il n'affiche pas les images dans la div faite pour cela (.imageHover).
Voici mon code
<div class="products">
<ul>
<li><a href="lien1.com"><img src="image1.png" />Lien1</a></li>
<li><a href="lien2.com"><img src="image2.png" />Lien2</a></li>
<li><a href="lien3.com"><img src="image3.png" />Lien3</a></li>
</ul>
<div class="imageHover"></div>
</div>


CSS :
div > div > ul > li > a > img{
	opacity: 0;
	float: right;
	width: 400px;
	height: 400px;
	border-radius: 15px;
}
div > div > ul > li:nth-child(1) > a:hover img{
	opacity:1;
	margin: 0% 0% -50% -110%;
}
div > div > ul > li:nth-child(2) > a:hover img{
	opacity:1;
	margin-top: -59%
}
div > div > ul > li:nth-child(3) > a:hover img{
	opacity:1;
	margin-top: -118%
}
div > div > ul > li:nth-child(4) > a:hover img{
	opacity:1;
	margin-top: -177%
}
div > div > ul > li:nth-child(5) > a:hover img{
	opacity:1;
	margin-top: -236%;
}
div > div > ul > li:nth-child(6) > a:hover img{
	opacity:1;
	margin-top: -295%
}


En attendant avec impatience vos retours et j'espère votre/vos solution(s) !
Bonne journée
Modifié par haschichiuns (07 Jun 2019 - 11:18)
Bonsoir
En ce qui me concerne, j'aurais écrit

#products {position:relative;}
li a img {position:absolute;display:none;}
li:hover a img {display:block;}

Mais je n'ai pas testé, je ne garantis pas que ça marche

Par ailleurs ne pas oublier que :hover ne fonctionne que sur les ordinateurs, pas sur les tablettes et smartphones.
Merci pour cette solution

En réalité j'ai trouvé une autre solution que je vais partager, ça pourra toujours servir à quelqu'un

Les images sont toujours affichées au même endroit. Cependant le petit défaut est que je dois faire le css pour chaque image. Si j'ai 40 liens et donc 40 images (une image par lien) je dois faire 40 sélecteurs css avec chacun sa propriété unique.

<div class="products">
<ul>
<li><a href="lien1">titre lien1<img src="img1" /></a></li>
<li><a href="lien2">titre lien2<img src="img2" /></a></li>
</ul>
</div>


#products {
		position: relative;
	}
	.products li a img{
		width: 400px;
		height: 400px;
		position: absolute;
		display: none;
	}
	.products li:hover a img{
		display: block;
	}
	.products > ul > li:nth-child(1) > a > img {
		margin-top: -0px;
	}
	.products > ul > li:nth-child(2) > a > img {
		margin-top: -21px;
	}

Dans le code CSS le margin-top: -0px est important car il permet d'initialiser la première image (ici à 0px par rapport à son lien1). Ensuite chaque image est décalée à cause du texte de lien (donc chaque lien fait 21px de hauteur). Donc j'annule ce décalage en mettant margin-top:-21px à la 2ème image (la 3ème image aura pargin-top: -42px etc)
Sujet clos
Aller à