28172 sujets

CSS et mise en forme, CSS3

Navigation menu : effet hover animé

Bonjour,

Je ne sais pas si c'est possible mais je souhaiterais pouvoir afficher une petite image animée au survol d'un menu.

En effet, une simple image qui apparaît et disparaît brutalement, c'est pas top. Smiley confus

Bien entendu, on peut toujours utiliser un gif animé mais un peu rustique et lourd.

Mon ambition est très modeste, un effet d'opacité tout bête ferai mon bonheur. Smiley ravi

Est-ce possible en css 3 ?

Merci !!
salut,
normalement ce n'est pas très compliqué. Étant donné que tu ne peux pas animer un changement entre un display block / none, tu peux simuler cela avec un positionnement absolue que tu remet à static lors du hover (c'est peut être pas clair Smiley biggrin ). Bon un exemple.
Génial ! Smiley ravi c'est exactement l'effet que je recherche, en revanche, je frise les pâquerettes question css et je ne vois pas trop comment intégrer ton css dans le mien.

Il faudrait déjà que j'appelle l'image à animer depuis ma classe css et non pas depuis le html.

Mon css original est

#main-navigation ul.menu > li:hover > a {
box-shadow: none!important;
background-image: url(img/main-menu-curseur.jpg);
background-repeat: no-repeat!important;
background-position: 50% 70%!important;
text-decoration: none;
}

Je ne sais pas si c'est très clair ?
eux-tu encore m'en dire plus ?
...et pour être précis, il s'agit d'un image qui s'afficherait derrière chaque rubrique de mon menu.

Dans ton exemple, il me semble que l'image s'affiche à côté du texte.

Si tu peux encore m'aider, ce sera vraiment sympa.
Sujet clos
Aller à