Prenons une situation classique, dans SPIP — mais a priori, aisément exportable ailleurs — : un bandeau tout ce qu’il y a de plus classique avec un gros logo. Ce logo, comme il est d’usage, renvoie lorsqu’on le clique à la page d’accueil du site. Or, le survoler, la plupart du temps ne produit rien, ce qui est bien dommage quand on aime les clignotements impulsif et qu’on est pas épileptique.
Pour remédier à cela, on pourrait opter pour un hover classique, très facile à mettre en place dans spip avec les logos de survol. Mais ce beau logo amoureusement concocté, éminent symbole de tout le site, mérite mieux. On décide donc de tenter un petit FadeIn. Une opération extrêmement facile.
On commence par installer les deux versions du logo, la normale et celle qu’on veut voir apparaître au survol. Ça donne ceci, par exemple :
Dans la css, on définit la classe .logosurvol comme ceci :
Ce qui permet au logo de survol de se positionner exactement au même endroit que l’autre, et au dessus.
Il suffit en suite de mettre au bon endroit un simplissime code de hover :
Et le tour est joué. Facile, raffiné, et utilisable à peu près partout. Youpi.
RSS 2.0
Plan du site
Espace privé