• 01.10.2023

    1 + 4 images au ratio 16/9, en 1100px par 619px. 

     

    SURVOL

     

     

     

     


    <div style="width: 1100px; height: 619px; border: 6px ridge white; box-shadow: 4px 4px 8px black; margin: 30px auto; text-align: left; background: url('http://ekladata.com/QIGMLgL7Xu2yhaZ0RoWQLkvSkQg.jpg'); background-size: cover;">
    <p id="fd">&nbsp;</p>
    <p id="fda">SURVOL</p>
    <p id="sv1" class="sv">&nbsp;</p>
    <p id="sv2" class="sv">&nbsp;</p>
    <p id="sv3" class="sv">&nbsp;</p>
    <p id="sv4" class="sv">&nbsp;</p>
    </div>
    <style><!--
    #fd{position:absolute; z-index:1; width:200px; height:619px; background:rgba(255,255,255,0.5); transform:translate(900px,0px);}
    #fda{position:absolute; z-index:1; width:200px; transform:translate(900px,0px); text-align:center; font-size:30px; text-shadow:2px 2px black; color:white;}
    .sv{position:absolute; z-index:1; width: 1100px; height: 619px; transition:all 1s 0s;}
    #sv1{background:url('http://ekladata.com/NBEg6SAqki9ba9jXdJmRf12jHQc.jpg'); background-size:1100px 619px; clip-path:circle(5% at 91% 20%);}
    #sv2{background:url('http://ekladata.com/ye3_rVX72R5G8oZOVJeGliSHcXA.jpg'); background-size:1100px 619px; clip-path:circle(5% at 91% 40%);}
    #sv3{background:url('http://ekladata.com/gGx6sbTyPHrMVzxtKqb8lWuWqcY.jpg'); background-size:1100px 619px; clip-path:circle(5% at 91% 60%);}
    #sv4{background:url('http://ekladata.com/LAc2v56XeVsFKNbt2Kfzb9kX0Hg.jpg'); background-size:1100px 619px; clip-path:circle(5% at 91% 80%);}
    #sv1:hover,#sv2:hover,#sv3:hover,#sv4:hover{z-index:5; width:1100px; height:619px; clip-path:circle(100% at 50% 50%);}
    --></style>