Plusieurs hover sur une seule image

Bonjour

Je souhaite réaliser l'opération suivante pour un site de piercing.

Sur la photo d'un visage vierge, l'utilisateur passe la souris sur un lien portant le nom du piercing et celui-ci s'affiche sur le visage. Cet affichage est réalisé grâce à la superposition de la photo du piercing sur celle du visage en utilisant overlay-image.

Une partie du travail est réalisé mais unitairement en utilisant le hover.

Passer la souris sur le visage affiche bien la photo liée au hover.

Le code HTML :

<div class="overlay-image"><img src="images/photos/Visage_vierge.png" alt="Alt text" class="image" />
<p><a href="/"> LIEN </a></p>
<div class="hover"><img src="images/photos/septum.gif" alt="Alt text hover" class="image" /></div>
</div>

et le CSS

.overlay-image .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: .5s ease;
}
 
.overlay-image .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: .5s ease;
}
  
/* Apparition overlay sur passage souris */
.overlay-image:hover .hover {
 opacity: 1;
}

Passer la souris sur LIEN fait bien superposer septum.gif sur Visage_vierge.png.
Ce que je ne parviens pas à faire, c'est de créer d'autre liens pour faire superposer les autres *.gif spécifiques sur le Visage. Chacun des liens correspondants à un *.gif particulier.

A chaque fois que je rajoute le code HTML :

<p><a href="/"> LIEN2 </a></p>
<div class="hover"><img src="images/photos/image2.gif" alt="Alt text hover" class="image" /></div>

par exemple, c'est le premier gif qui est affiché (je pense qu'il y a un effet hiérarchique).

Auriez-vous une autre piste de développement, si possible, sans utiliser le javascript ?



Je vous remercie
Dionee

bonjour,

En utilisant un id (ou une class réutilisable) sur le lien, il te sera possible d'appliquer (ou filtrer) un style unique pour chacun d'eux.

Cdt

D'accord, ce qui me bloque, c'est que le lien doit être contenu dans le div du overlay pour la superposition. Problème: cela implique que l'image en background est aussi réactive à la souris, alors que seul LIEN doit l'être

Salut,

a écrit :
Problème: cela implique que l'image en background est aussi réactive à la souris, alors que seul LIEN doit l'être

Ca c'est juste lié a ton code :

.overlay-image:hover .hover {
 opacity: 1;
}

Ici tu as bien indiqué overlay-image:hover et non pas le hover du lien donc rien d'étonnant.

Il faut donc que tu fasse un effet au hover de chaque lien en les reliant à une image soit par classe soit par proximité comme ça par exemple : https://jsfiddle.net/14eno8sd/

a écrit :
ce qui me bloque, c'est que le lien doit être contenu dans le div du overlay pour la superposition

non : https://jsfiddle.net/14eno8sd/1/

Autres pistes :
- Js
- multiple background CSS

Bonne journée

Au final, j'ai trouvé :

<div class="menu">
<div class="overlay-image">
<img src="images/photos/Visage_vierge.png" alt="Alt text" class="fond" style="margin-right: 5px; float: left;" /> 
<a href="#" class="lien"> Septum </a> <img src="images/photos/septum.gif" alt="" class="image" /> <br /> 
<a href="#" class="lien"> Arcade</a> <img src="images/photos/arcade.gif" alt="" class="image" />
</div>
</div>

et le CSS

.menu a {
   display:block;
}
.menu a img {
   display:none;
}
.menu a:hover img {
   display:inline;
}

.menu {
  height: 100%;
  width: 100%;
  display:grid;

Une image à gauche sur laquelle une image se superpose lorsqu'on passe la souris sur un des liens qui se situe à droite de l'image.
Le menu permet d'avoir les liens présentés en colonne