28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'essaye de me dépatouiller avec ce script pour obtenir le même effet que sur cette exemple (déjà un peu modifier pour obtenir seulement la partie intéressante). Comme vous pouvez le voir, chaque fois qu'on change le curseur d'images miniature, celle ci s'aggrandit pour afficher une image en gros plan, quand vous passez sur une autre miniature, c'est celle ci qui s'aggrandit, indépendamment du fait que l'image précédente soit déjà en gros plan.

http://luffyserveur.free.fr/alsacreation/vertical.html

J'essaye de reproduire cette effet pour des images définis en "background-image" sans grand succés, quand je surbrille l'image, celle ci s'aggrandit bien, mais je n'arrive pas à passer le curseur sur l'autre image.

http://luffyserveur.free.fr/alsacreation/horizontal.html

Peut être que mes explications ne sont pas trés clair, mais les exemples vous en diront plus, pouvez vous m'aider

En vous remerciant par avance

archive original
http://luffyserveur.free.fr/alsacreation/Suckerfish_HoverLightbox.zip
mumuri a écrit :
je n'arrive pas à passer le curseur sur l'autre image

Logique, vu que la première image, en grand, vient masquer l'image suivante. Alors que dans le premier exemple, une image affichée en grand ne masque qu'une portion des images précédente et suivante, ce qui permet de les survoler pour obtenir le même effet sur ces autres images.

Il doit être possible de bidouiller quelque chose qui fonctionnerait au survol de la zone recouverte par la grande image (en jouant sur des SPAN, des A, du positionnement relatif et du z-index). Je n'ai pas de solution précise en tête, mais ça doit être jouable, au moins dans les navigateurs modernes.

Par contre l'idée de réaliser ce type d'effet sans JavaScript me semble sans intérêt.