Menu
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);
}
268
To set the opacity of a background, image, text, or other element, you can use the CSS opacity property. Values for this property range from 0 to 1. If you set the property to 0, the styled element will be completely transparent (ie. invisible).
By utilizing the :hover selector, you can set the opacity of an element to change on mouse-over to create a "fade in" or "fade out" effect.
To sum it up : Use opacity and filter property to darken an image and create cool hover effect with it. Use RGBA colors to make your background image darker.
There is no background-opacity property in CSS, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.
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.
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
