Comment puis-je afficher une image dans une div séparée sur la souris d'une div en utilisant uniquement CSS?

StackOverflow https://stackoverflow.com/questions/108461

  •  01-07-2019
  •  | 
  •  

Question

J'ai une petite galerie de vignettes. Lorsque je place le pointeur de la souris sur une vignette, j'aimerais afficher une image en taille réelle dans un div en haut à droite de l'écran. J'ai vu cela se faire en utilisant uniquement du CSS et j'aimerais aller dans cette direction plutôt que d'utiliser du javascript si possible.

Était-ce utile?

La solution

Pure CSS Popups2 , à partir du même site que celui qui nous apporte Complexspiral . Notez que cet exemple utilise des liens de navigation réels en tant qu'élément survolé. Si vous ne le souhaitez pas, cela peut poser problème en ce qui concerne les versions d’IE.

La technique de base consiste à coller chaque image dans une balise de lien avec un href réel (sinon, certaines versions d'IE négligeraient: survoler) 

<a href="#">Text <img class="popup" src="pic.gif" /></a>

et positionnez-le intelligemment en utilisant la position absolue. Masquer l'image initialement 

a img.popup { display: none }

, puis sur le survol de lien, configurez-le pour qu’il apparaisse. 

a:hover img.popup { display: block }

C'est la technique de base, mais il y aura toujours des limitations majeures de positionnement car la balise image réside dans la balise link. Voir le lien pour plus de détails; il utilise quelque chose d'un peu plus délicat que l'affichage: aucun pour masquer l'image.

Autres conseils

CSS Playground utilise du CSS pur pour ce type de choses, une des démos est sûrement utile vous et, comme c’est tout le CSS, visualisez simplement la source à apprendre - vous voudrez probablement utiliser la pseudo-classe: hover, mais elle est limitée en fonction du ciblage de votre navigateur.

La démonstration de Pure CSS Popups 2 par Eric Mey semble assez similaire à ce que tu veux.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top