-
Flip plus simple
2 images animées en 800x450px, créées à partir de courtes vidéos (2 secondes), converties au format Gif, hébergées sur Ekla (album).
Survolez l'image.
<div id="fl">
<p id="fl1"> </p>
<p id="fl2"> </p>
<p id="fl3"> </p>
</div>
<style><!--
#fl{width:800px; height:450px; margin:5px auto;}
#fl1{position:absolute; z-index:10; width:800px; height:450px;}
#fl2{position:absolute; z-index:1; width:800px; height:450px; background:url(http://ekladata.com/AxC3pAl6PGxIU_lHYKSxN3cOBIo.gif); transform:translate(0px,0px) rotatey(180deg); transition:all 1s linear;}
#fl3{position:absolute; z-index:2; width:800px; height:450px; background:url(http://ekladata.com/BLJ1Ud2imX67WaSVyzeH3Uvzpfg.gif); transform:translate(0px,0px) rotatey(0deg); transition:all 1s linear;}
#fl1:hover ~ #fl2{z-index:5;transform:translate(0px,0px) rotatey(0deg);}
#fl1:hover ~ #fl3{z-index:3;transform:translate(0px,0px) rotatey(180deg);}
--></style>