CODEWITHSUNDEEP
jqueryimagecsshover
user2481095
user2481095

Reputation: 2106

How to change the opacity of image on hover using css

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); 
}

Upvotes: 19

Views: 66324

Answers (2)

Tasnim Rizvy
Tasnim Rizvy

Reputation: 1

This will give you a better and smooth output

img {
    opacity: 0.5;
    transition: 0.3s;
}
img:hover {
    opacity: 1.0;
    transition: 0.3s;
}

Upvotes: 0

jterry
jterry

Reputation: 6269

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.

Upvotes: 28

Related Questions