• 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">&nbsp;</p>
    <p id="fl2">&nbsp;</p>
    <p id="fl3">&nbsp;</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>