10

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!

Community
  • 1
  • 1
Cojocaru Daniel
  • 139
  • 1
  • 3
  • 6

2 Answers2

21

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.

Vigrond
  • 8,148
  • 4
  • 28
  • 46
  • 1
    You don't have to target all properties, when you only change one. I would specify opacity instead. – Nix Feb 12 '12 at 17:33
  • Thanks, but this isn't exactly what I want. please look again at the example I've posted in my question, When I'm not hovering the images I want them to have opacity 0 and when I'm hovering the images container to have this transition effect from 0 to 1 exactly like in the example – Cojocaru Daniel Feb 12 '12 at 17:35
  • @CojocaruDaniel, no, it's not one-hundred percent exactly identical. However, all you need to do is dig into his example and tweak the timing & opacity to whatever you want. – Sparky Feb 12 '12 at 17:41
  • 1
    Sorry I'm not going to exactly duplicate your example. Your question asked if 'only fadein/fadeout' was possible without javascript, and that's where my answer applies. I gave you the tools for you to complete your own solution using your own head. – Vigrond Feb 12 '12 at 17:43
  • Sorry, it was a stupid comment, thanks for your help, also I'm wondering how can I make the image visible by default ( when the page is loaded) exactly like in the example I've posted on my question? – Cojocaru Daniel Feb 12 '12 at 18:05
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/

Nix
  • 5,746
  • 4
  • 30
  • 51
  • thanks, but how about making those images visible by default and then apply the fade in fade out effects like in the example I've posted in my question. – Cojocaru Daniel Feb 12 '12 at 19:12
  • Simply remove the `display:none;` on #thumbnails. Then, it will be visible on load, and faded out on mouseoff. – Nix Feb 12 '12 at 19:15
  • good, but how to make this also with Vigrond's answer on css3 solution, any ideas ? – Cojocaru Daniel Feb 12 '12 at 20:24
  • Not if you want all three states (visible on load, invisible on mouseoff, visible again on mouseon). – Nix Feb 12 '12 at 20:36
  • here is my markup: http://jsfiddle.net/dynamyc/UsA7E/ how can I make this work with my markup ? – Cojocaru Daniel Feb 12 '12 at 20:57
  • The `ul` has no children of the type `div`, so you need to change that to `li`. Furthermore, your `ul` needs to have a width, so it does not collapse as soon as you fade out the `li`s. See here: http://jsfiddle.net/TheNix/UsA7E/2/ – Nix Feb 12 '12 at 21:06