fade in/out with css3 [duplicate] - css

Question

This question already exists:
Closed 11 years ago.
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 ?
Thanks!

Answer 1

Yes this is possible with CSS3 transitions.
Here's an example: http://jsfiddle.net/fgasU/
code:
<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;
}
img:hover{opacity:0}​
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.

Answer 2

The jQuery solution: Wrap the thumbnails in a trigger div, which is absolutely positioned over the image. Target that to fade the elements in and out.
For a CSS3 solution, refer to Vigrond's answer.
HTML
<div id="wrapper">
<img src="http://lorempixum.com/600/600" />
<div id="trigger">
<div id="thumbnails">
<img src="http://lorempixum.com/60/60" />
<img src="http://lorempixum.com/60/60" />
<img src="http://lorempixum.com/60/60" />
<img src="http://lorempixum.com/60/60" />
</div>
</div>
</div>
CSS
#wrapper { position:relative; }
#trigger {
width:100%;
height:80px;
position:absolute;
left:0;
bottom:20px; }
#thumbnails {
width:100%;
height:80px;
display:none; }
#thumbnails img {
margin:10px;
float:left; }
jQuery
$(document).ready(function(){
$("#trigger").hover(function () {
$(this).children("div").fadeTo(200, 1);
}, function(){
$(this).children("div").fadeOut(200);
});
});
See my fiddle:
http://jsfiddle.net/TheNix/Cjmr6/