Fade in fade out on image hover using CSS3?

http://jsfiddle.net/L7XCD/2/ Just add the transition effect to your element without the hover-tag

This should work for you! http://jsfiddle.net/L7XCD/1/

Let's use the great mozilla documentation to explain this:

Transition rovide a way to control the speed of animation changes to CSS properties. Instead of having the animation changes take effect instantly, you can transition the property changes over a specified time period.

Also we used the transition timing functions (ease, linear, easy-in, easy-out, easy-in-out)

Timing functions determine how intermediate values of the transition are calculated. The timing function can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier

CCS markup:

img {
    opacity: 0.6;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
img:hover {
    opacity: 1.0;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}​

Since he was using the transition ease-in-out, I thought it was better to use the same transition function.

For more information, check the documentation here

Hope it helps!