Fade in fade out on image hover using CSS3?

问题

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/

回答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!

回答2:

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

来源：https://stackoverflow.com/questions/11375724/fade-in-fade-out-on-image-hover-using-css3

标签

css

css3

jsfiddle