• Montage2.29.3.23

    Même code avec des images arrondies.

    SURVOL

     

     

     

     

     

     


    <div style="position: relative; overflow: hidden; width: 1000px; height: 563px; margin: 30px auto; text-align: left;">
    <p id="jd0">SURVOL</p>
    <p id="jd1" class="jd">&nbsp;</p>
    <p id="jd2" class="jd">&nbsp;</p>
    <p id="jd3" class="jd">&nbsp;</p>
    <p id="jd4" class="jd">&nbsp;</p>
    <p id="jd5" class="jdv">&nbsp;</p>
    <p id="jd6" class="jdv">&nbsp;</p>
    </div>
    <style><!--
    #jd0{position:absolute; z-index:1; width:150px; font-size:30px; color:green; text-shadow:2px 2px white; transform:translate(425px,265px);}
    .jd{position:absolute; z-index:1; width:250px; height:250px; border-radius:50%; border:4px solid white; transition:all 1s;}
    #jd1{box-sizing:border-box; background:url('http://ekladata.com/IskqBTlTBjkiEm38baN4IFtu59s.jpg'); background-size:1000px 563px; background-position:0px 0px; transform:translate(-125px,0px);}
    #jd2{box-sizing:border-box; background:url('http://ekladata.com/ZelTGvkFALTEEko086wGHMkGTJQ.jpg'); background-size:1000px 563px; background-position:-900px 0px; transform:translate(900px,0px);}
    #jd3{box-sizing:border-box; background:url('http://ekladata.com/rVOJ87MxZ-Ls_4dghLpZVGRTYNI.jpg'); background-size:1000px 563px; background-position:-900px -313px; transform:translate(900px,313px);}
    #jd4{box-sizing:border-box; background:url('http://ekladata.com/yBTZU4YcKXwiyNpSTSBLPWtpHBs.jpg'); background-size:1000px 563px; background-position:0px -313px; transform:translate(-125px,313px);}
    #jd1:hover,#jd2:hover,#jd3:hover,#jd4:hover{z-index:5;width:1000px; height:563px; background-position:0px 0px; transform:translate(0px,0px);}
    .jdv{position:absolute; z-index:1; width:317px; height:250px; border-radius:50%; border:4px solid white; transition:all 1s;}
    #jd5{box-sizing:border-box; background:url('http://ekladata.com/mgwTjPJe-nnSX3XhIGjKb2OuMnI.jpg'); background-size:317px 563px; background-position:0px 0px; transform:translate(340px,-125px);}
    #jd6{box-sizing:border-box; background:url('http://ekladata.com/ouqcRO0hR_NNNEdIQqRJqItdEpA.jpg'); background-size:317px 563px; background-position:0px -463px; transform:translate(340px,463px);}
    #jd5:hover,#jd6:hover{z-index:5; width:317px; height:563px; background-position:0px 0px; transform:translate(340px,0px);}
    --></style>