fade in/out con CSS3

Question

Eventuali duplicati:
thumbnails fade in fade out

Sono curioso se è possibile ottenere this effetto (solo il fade in/out)

con css3. Ho uno scroller di anteprime simile e voglio creare quell'effetto senza javascript, o se questo non è possibile potresti aiutarmi con una soluzione semplice per la creazione di questo con jquery? Grazie!

Answer 1

Sì, questo è possibile con le transizioni CSS3.

Ecco un esempio: http://jsfiddle.net/fgasU/

codice:

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

Questo semplice esempio cambierà l'opacità al passaggio del mouse. Poiché una transizione css è definita per le proprietà "all" e viene assegnata una transizione di 1 secondo con una funzione di andamento facilitato, la modifica della proprietà è animata.

Inoltre, poiché è una nuova proprietà, la proprietà di transizione deve essere preceduta dall'implementazione del brower applicabile. -webkit per chrome/safari, -moz per firefox/mozilla, -o opera, -ms microsoft.

Answer 2

La soluzione jQuery: avvolgere le miniature in un div trigger, che è assolutamente posizionato sull'immagine. Punta a far svanire gli elementi dentro e fuori.

Per una soluzione CSS3, fare riferimento alla risposta di 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); 
    }); 
}); 

Vedi il mio violino: http://jsfiddle.net/TheNix/Cjmr6/