How to change the opacity of image on hover using css


Tags: jquery,css,image,css3,hover

Problem :

Im trying to figure out how to set all images to be say 50% opacity initially, and then change to 100% opacity on hover

I tried setting this rule in the css file but it does not work. I gives a parse error:

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


Solution :

Your code is good- verified in this Fiddle with a friendly fish: 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);
}

The opacity property works in all modern browsers, and the filter:alpha covers <= IE8.


    CSS Howto..

    How to change CSS when user scrolls past a certain div

    How to position
    below rest of elements

    How Can I Make An Odd Shaped Icon into a “Circle”?

    How to make the background color transparent

    How to create a dynamically sized form background with CSS?

    How to make a CSS/javascript feature like this website? [closed]

    How to fix Conflicting responsive menu Css and Colorbox css?

    How to display shopping cart at the right of page

    Internet Explorer: how to escape extra carriage return after editing Textarea?

    How to set height and width of video element in percent

    How do I implement CSS + JavaScript scripts on specific pages on our Drupal site? [closed]

    toggle css as well as show/hide jquery

    How to properly center a 100% width div in css

    How can I float right two span tags on different lines?

    Woocommerce CSS - How do I address Payment Methods, so I can tweak/CSS it

    How to style xml file? from xml to html using xslt and style that html using css [closed]

    How do I stop and change a CSS keyframe in Javascript?

    How to center part of a navbar

    How to style a list within a menu?

    Bootstrap: How to apply certain CSS rules, when on different devices [duplicate]

    How to add border for html tr

    How do I make this nested div to show up on top right corner and make text wrap around it?

    CSS parser/abstracter? How to convert stylesheet into object

    Nginx server (not showing changes) - Delete cache?

    how to create a facebook look alike gallery with css and jquery? [closed]

    How to target Microsoft Edge with CSS? [duplicate]

    How does a GPL license restrict commercial web applications? [closed]

    How can I create left & right side fixed width elements with a center that fills the remainder?

    How to create dropdown navigationbar without float?

    CSS: How does youtube change its appearance based on screen size?