fundido de entrada/salida con CSS3

Question

Duplicar posibles:
thumbnails fade in fade out

estoy curiosidades si es posible lograr this efecto (sólo el fundido de entrada/salida)

con css3. Tengo un scroller de miniaturas similar y quiero crear ese efecto sin javascript, o si esto no es posible, ¿podría ayudarme con una solución simple para crear esto con jquery? Gracias!

Answer 1

Sí, esto es posible con las transiciones CSS3.

He aquí un ejemplo: http://jsfiddle.net/fgasU/

código:

<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}​ 

Este sencillo ejemplo cambiará la opacidad en vuelo estacionario. Debido a que se define una transición css para 'todas' las propiedades, y se les da una transición de 1 segundo con una función de relajación de facilidad de entrada y salida, el cambio de propiedad está animado.

Además, como es una propiedad nueva, la propiedad de transición debe ir precedida por la implementación del navegador correspondiente. -webkit para Chrome/safari, -moz para firefox/mozilla, -o opera, -ms microsoft.

Answer 2

La solución de jQuery: Envuelva las miniaturas en un divisor de activación, que se coloca completamente sobre la imagen. Apunta a eso para atenuar los elementos dentro y fuera.

Para una solución CSS3, consulte la respuesta de Vigrond.

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); 
    }); 
}); 

Ver el violín: http://jsfiddle.net/TheNix/Cjmr6/