web-dev-qa-db-fra.com

Comment changer l'opacité de l'image en survol en utilisant CSS

J'essaie de comprendre comment définir toutes les images pour qu'elles soient 50% d'opacité initialement, puis changer pour 100% d'opacité en survol.

J'ai essayé de définir cette règle dans le .css fichier mais il donne une erreur d'analyse:

img {
  opacity:0.4;
  filter:alpha(opacity=40); 
}
img:hover {
  opacity:1.0;
  filter:alpha(opacity=100); 
}
jqueryimagecsshover
12
user2481095

Votre code est bon - vérifié dans ce Fiddle avec un poisson amical: http://jsfiddle.net/Qrufy/

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Colossoma_macropomum_01.jpg/800px-Colossoma_macropomum_01.jpg" />

img {
    opacity: 0.5;
    filter: alpha(opacity=40);
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100);
}

La propriété opacity fonctionne dans tous les navigateurs modernes et la propriété filter:alpha couvre <= IE8.

20
jterry