• Viager 4

    Ce montage, en animation, demande d'écrire une animation par image, ce qui est lourd; le voici en survol, plus simple.

    7 images au ratio 16/9, modifiable au ratio de vos images; Les images, de différentes formes, s'agrandissent à partir de la partie affichée.

    SURVOL

     

     

     

     

     

     

     


    <div style="width: 1000px; height: 563px; margin: 30px auto; text-align: left;">

    <p id="fm0">SURVOL</p>
    <p id="fm1" class="fm">&nbsp;</p>
    <p id="fm2" class="fm">&nbsp;</p>
    <p id="fm3" class="fm">&nbsp;</p>
    <p id="fm4" class="fm">&nbsp;</p>
    <p id="fm5" class="fm">&nbsp;</p>
    <p id="fm6" class="fm">&nbsp;</p>
    <p id="fm7" class="fm">&nbsp;</p>
    </div>
    <hr style:"border:3px double black;"><br>...
    <style><!--
    #fm0{position:absolute; z-index:1; width:150px; font-size:30px; transform:translate(670px,20px);}
    .fm{position:absolute; z-index:1; box-shadow:inset -3px -3px 5px white,inset 3px 3px 5px black; transition:all 0.5s linear;}
    #fm1{background:url('http://ekladata.com/m5SG0EoWZhbqpZcK6GDrEz582jI.jpg');background-size:1000px 563px; width:300px; height:120px; border-radius:50%; transform:translate(100px,50px); background-position:-100px -50px;}
    #fm2{background:url('http://ekladata.com/HXGtGMjKotX6UYQIWSiZSHFwHeA.jpg'); background-size:1000px 563px; width:120px; height:300px; border-radius:50%; transform:translate(200px,200px);background-position:-200px -200px;}
    #fm3{background:url('http://ekladata.com/lVu6eVW9dwhU7n985wp84YmplHc.jpg'); background-size:1000px 563px; width:120px; height:120px; border-radius:50%; transform:translate(500px,50px);background-position:-500px -50px; }
    #fm4{background:url('http://ekladata.com/lVu6eVW9dwhU7n985wp84YmplHc.jpg'); background-size:1000px 563px; width:120px; height:120px; border-radius:0%; transform:translate(450px,200px);background-position:-450px -200px; }
    #fm5{background:url('http://ekladata.com/x96Qvyk4w9RlC674_ZCqmU-fVHE.jpg'); background-size:1000px 563px; width:300px; height:120px; border-radius:60px; transform:translate(400px,400px);background-position:-400px -400px; }
    #fm6{background:url('http://ekladata.com/o90G-Rf_JM1YqplLuBMXt3l_BLA.jpg'); background-size:1000px 563px; width:250px; height:120px; border-radius:60px 0px 60px 0px; transform:translate(650px,100px);background-position:-650px -100px; }
    #fm7{background:url('http://ekladata.com/MFLtJ9mm7Ox2Uxe1tLOCfZdF_UE.jpg'); background-size:1000px 563px; width:150px; height:200px; border-radius:75px 75px 150px 150px; transform:translate(750px,300px);background-position:-750px -300px; }
    #fm1:hover, #fm2:hover,#fm3:hover, #fm4:hover,#fm5:hover, #fm6:hover, #fm7:hover{z-index:5; width:1000px; height:563px; border-radius:0%; transform:translate(0px,0px); background-position:0px 0px;}
    --></style>