Css – fade in/out with css3


Possible Duplicate:
thumbnails fade in fade out

I'm curios if it's possible to achieve this effect ( only the fade in/out )

with css3.
I have a similar thumbnails scroller and I want to create that effect without javascript, or if this is not possible could you help me with a simple solution for creating this with jquery ?

Best Solution

Yes this is possible with CSS3 transitions.

Here's an example: http://jsfiddle.net/fgasU/


<img src="photo.jpg"/>​

img{-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;


This simple example will change the opacity on hover. Because a css transition is defined for 'all' properties, and they are given a 1 second transition with an ease-in-out easing function, the property change is animated.

Also, because it is a new property, the transition property must be preceded by the applicable brower's implementation. -webkit for chrome/safari, -moz for firefox/mozilla, -o opera, -ms microsoft.