Dec 282012
 

Fare un’animazione cross-fade con css3 è cosa relativamente semplice.

Mettiamo in una pagina all’interno di un box due immagini:

 <div id="cf">
 <img src="images/41b98.jpg">
 <img src="images/b4b92.jpg">
 </div>
 

Poi prepariamo il nostro div che contiene le immagini in modo classico:

 #cf {
 position:relative;
 height:145px;
 width:200px;
 margin:0 auto;
 }
 

Quindi prepariamo la transizione sulla nostra immagine:

 #cf img {
 position:absolute;
 left:0;
 -webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 -o-transition: opacity 1s ease-in-out;
 transition: opacity 1s ease-in-out;
 }
 

Infine l’evento che genererà  l’effetto, ovvero l’over sull’immagine:

 #cf img.top:hover {opacity:0;}
 

L’esempio

Poi prepariamo il nostro div che" data-image="" data-button=""> Share