27802 sujets

CSS et mise en forme, CSS3

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
Modérateur
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
Modérateur
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
Je vous remercie pour votre aide qui m'a débloqué.

Une question que je rencontre est que le liens doivent être mis, comme dans l'exemple, à côté de l'image.
S'il est sous l'image, il semble être "couvert" par l'image. De fait, passer la souris dessus (ou cliquer) n'a aucun effet.

J'ai remarqué que cela arrive si l'image de fond est en position left.
L'idée que j'avais était d'aligner dans le sens vertical tous les liens pour plus de visibilité pour l'utilisateur. Cependant, sans positionnement, une seule ligne est possible d'afficher à côté de l'image de fond.
Modifié par dionee (18 Jul 2021 - 22:30)
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