How to change the opacity of image on hover using css
53,531
Your code is good- verified in this Fiddle with a friendly fish: http://jsfiddle.net/Qrufy/
img {
opacity: 0.5;
filter: alpha(opacity=40);
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Colossoma_macropomum_01.jpg/800px-Colossoma_macropomum_01.jpg" />
The opacity
property works in all modern browsers, and the filter:alpha
covers <= IE8.
Author by
user2481095
Updated on July 09, 2022Comments
-
user2481095 almost 2 years
I'm trying to figure out how to set all images to be 50% opacity initially, and then change to 100% opacity on hover.
I tried setting this rule in the
.css
file but it gives a parse error:img { opacity:0.4; filter:alpha(opacity=40); } img:hover { opacity:1.0; filter:alpha(opacity=100); }
-
jterry almost 11 yearsIt's indented properly? OP's code (at least what they posted) is valid, that was the point :)