Tombé par hasard sur ce code en fouinant sur le génial site css-tricks. L’astuce est de gérer une double zone de roll-over grâce aux CSS. Cela permet de mettre en relation une image et sa légende de manière très évidente et absolument propre.

remote_link1

Si vous préférez les images à droite et les légendes à gauche, pas de problème ; les images sont positionnées en absolute. Vous définirez quatre zones d’interactivité complètes, incluant texte et image, dans une ancre <a></a>. Il faut donc quatre identifiants précis pour ces div ; le reste n’est qu’une affaire de décoration : couleur, typo, border.

On peut voir l’exemple ici ; débrouillez-vous pour récupérer la source…

Comments

  1. Pas con cette technique! Même si bon, au final un ptit coup de javascript l’aurait fait en se prenant moins la tête et avec éventuellement un effet de transition (jQuery est notre ami).

  2. I am currently trying to do this for a client as well, with a paw print too believe it or not haha, any chance i could get you to look at my style sheet and give me specific custom instruction? this is it thank you![CSS redacted]

Comments are closed.