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="">