Fade in fade out on image hover using CSS3?

Question

I was wondering if it was possible to state an unhover class at all on an image?

What I am trying to achieve is when someone hovers over an image it will fade in and then when they unhover it fades back out?

Heres my code, I got the fade in to work when someone hovers over an image but I need it too fade out when they unhover... hope this made sense.

http://jsfiddle.net/L7XCD/

Answer 1

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!