Discussion :

[guillaumeabxl]

Bonjour à tous,

Je voudrais créer un simple effet de mouseover sur des images, celles-ci se trouvent dans une Div et j'applique la balise "opacity" sur le hover de cette Div.
Je voudrais que les images soient légérement transparente au passage de la souris.

Voila la div qui contient les images :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#big {float: left; width: 454px;}
#big a,
#big a:hover {opacity:0.9;}

Mais cela ne fonctionne pas. J'ai essayé d'utiliser "opacity" directement dans :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#big {float: left; width: 454px; opacity:0.9;}

alors les images sont transparente.

Merci pour vos commentaires,
G

[Macmillenium]

Bonjour,

opacity n'est pas une balise, mais une propriété CSS

Essaye d'appliquer l'opacité directement sur l'image :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
#big a:hover img {opacity:0.9;}

[guillaumeabxl]

c'est bien ça, merci beaucoup pour ton aide.
je suis très enthousiaste des possibilités qu'offre CSS.

[Candygirl]

Hello,

Il me semble que ton problème avait comme source la double attribution de l'opacité à deux sélecteurs, séparés par une virgule:

- sur ton lien "normal": #big a
- sur le rollover: #big a:hover

Tu ne voyais donc aucun effet lors du rollover puisque le lien était déjà à 0.9 d'opacité avant le rollover

Il t'aurait suffi de simplement supprimer le #big a pour ne garder que le #big a:hover pour observer le résultat escompté.

Je ne sais pas comment tu as appliqué la suggestion de Macmillenium. Si tu as simplement ajouté le "img" à ton code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#big a,
#big a:hover img {opacity:0.9;}

tu constates effectivement un effet lors du rollover, mais il faut être conscient que ton image dans le lien à déjà une opacité de 0.9 d'appliquée au départ et, lors du rollover, l'image prend le 0.9 du 0.9 de l'image de base.