• 16.12.B

     2 images dimensionnées en 800x600px par le code.

    SURVOL

     

     


    <div id="am0">
    <p id="sv">SURVOL</p>
    <div id="flipper">
    <p id="av">&nbsp;</p>
    <p id="ar">&nbsp;</p>
    </div>
    </div>

    <p>&nbsp;</p>

    <style><!--
    #am0 {width:800px; height:600px; margin:50px auto;}

    #sv{position:absolute; z-index:5; width:120px; background:rgba(0,0,0,0.5); font-size:25px; color:white; text-shadow:1px 1px black;}
    #flipper {transition: 1s; transform-style: preserve-3d; position: relative;}

    #av, #ar{width: 800px; height: 600px; background-size:800px 600px; border:4px solid white; box-shadow:4px 4px 8px black; backface-visibility: hidden; position: absolute; transform: translate(0px,0px);}
    #av{z-index: 2; background:url('http://ekladata.com/rnMgHMzedCgxBeEjHy00-5v6OnA.jpg'); transform: rotateY(0deg);}
    #ar{ background:url('http://ekladata.com/yDxjBZjbTkaIBJA4O_tMGCn4KyY.jpg'); transform: rotateY(180deg);}
    #am0:hover #flipper{transform: rotateY(180deg);}
    --></style>