Visionneuse d'image 100% CSS

Certains "furieux" s'amusent à pousser les possibilités du CSS à leur maximum.
Pour exemple, cette visionneuse d'image avec effet de zoom, 100% CSS. Passez donc votre souris sur cette image, vous verrez le résultat.

Je ne rentrerai pas dans des considérations trop techniques, mais le principe est simple: on place dans un div une miniature de l'image en fond d'une liste de liens contenant des balises em vides positionnées de façon absolue afin de quadriller le fond (l'usage des em n'est pas important, des span feraient tout aussi bien l'affaire).
Dans mon exemple, l'image est recouverte d'un quadrillage de 10x10 balises <li><a href="#nogo"><em id="IJ"></em></a></li> !!

Il suffit ensuite de définir dans le CSS un gestionnaire li a#IJ:hover em qui positionne l'image de fond en taille réélle dans l'élément survolé (un autre gestionnaire li a:hover em place et dimensionne l'élément survolé correctement).

D'après Stu Nicholls

Comments

[Moâ]

Hello ;-)
Je ne sais si je suis au bon endroit, mais over-blog m'envoie ici.
La fonction valider en-dessous de mon css n'apparait plus?
Over-blog me dit que j'ai mis du html, ce qui a engendré ce bug.
Comment rétablir???
Avec mes remerciements, @ bientôt j'espère...
Bye!

[Francisek]

 L'article vers lequel on t'a renvoyé est certainement T'as cassé ton blog ?, il peut t'aider à réparer.

[akane]

aujourdhui je me suis dit: aller!soyons fous, allons voir la categorie pour les experts
alors je confirme: le titre est bien choisit !^^
bonne continuation

[Francisek]

 

[samy]

Salut,
cet effet est absolument super...mais comment le reproduire...avec un langage de novice !!
Désolé de ne pas être encore un génie...(j'y travaille tous les jours, dur...dur) !! merci par avance
cordialement, samy

[Francisek]

 Comme le précise la catégorie, c'est un article plutôt réservé aux experts, et ce genre d'utilisation du CSS n'a pour objet que de montrer ce que l'on peut faire avec.

[Martine, la pÚlerine]

merci, génie de mon coeur ... et big bisousFrancisek : :0010:

[Martine, la pÚlerine]

oui ça je sais faire.... mais je l'ai où cette image en taille réelle ? Je la mets dans un article vide, juste avec cette image ?? Alors si c'est ça je sais faire... Je voulais, pour palier les manques de possibilités d'album, créer plusieurs articles "albums virtuels" avec les réductions des images puis pour les visualiser une à une en grandeur réelle, cliquer dessus... Donc pour résumer, est-ce que je peux pour chaque image créer un article vide avec cette image en grand et établir le lien à partir de l'album virtuel ??? Ca c'est la résolution du pb au minimum... mais j'aurais voulu (encore mieux) obtenir des images "plein écran"... j'ai vu ça sur certains blogs c'est super...Francisek : Tu peux mettre toutes tes miniatures sur la même page, en cliquant dessus, ça ouvre une fenêtre avec l'image en grand. Par exemple, le code : Donnera :