• Exemple 7

    8 images horizontales au ratio 16/9 mais on peut panacher image verticales et horizontales.

    Survol

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; text-align: left; background: linear-gradient(to bottom,#DEB887 0%,#FAEBD7 100%);">
    <p id="rond0">Survol</p>
    <p id="rond1" class="rond">&nbsp;</p>
    <p id="rond2" class="rond">&nbsp;</p>
    <p id="rond3" class="rond">&nbsp;</p>
    <p id="rond4" class="rond">&nbsp;</p>
    <p id="rond5" class="rond">&nbsp;</p>
    <p id="rond6" class="rond">&nbsp;</p>
    <p id="rond7" class="rond">&nbsp;</p>
    <p id="rond8" class="rond">&nbsp;</p>
    </div>

    <style><!--
    #rond0{position:absolute; z-index:1; width:10vw; transform:translate(25vw,0vw); font-size:1.5vw;}
    .rond{position:absolute; z-index:1; width:12vw; height:12vw; border-radius:50%; border:0.2vh solid grey; box-shadow:inset 0.4vh 0.4vh 0.6vh white, inset 0.4vh 0.4vh 0.6vh black; transition:all 1s linear;}
    #rond1{transform:translate(5vw,4vw); background:url('http://ekladata.com/h4qWRZ0q-7qq-nyaAVzxrG2Lzbc@1152x648.jpg'); background-position:-5vw -4vw;}
    #rond2{transform:translate(5vw,18vw); background:url('http://ekladata.com/6Dkx2eP9-3nBfotZGpVB4DTfbKs@1152x648.jpg'); background-position:-5vw -18vw;}
    #rond3{transform:translate(14vw,11vw); background:url('http://ekladata.com/J_vx82DT79Vy0s9aQFyvLmJZQ9s@1152x648.jpg'); background-position:-14vw -11vw;}
    #rond4{transform:translate(23vw,4vw); background:url('http://ekladata.com/YjKCEhEw82uh_jhSxfxnKLjBpV4@1152x648.jpg'); background-position:-23vw -4vw;}
    #rond5{transform:translate(23vw,18vw); background:url('http://ekladata.com/brI_QdGsuXIH7nYpS-44N4PBOvM@1152x648.jpg'); background-position:-23vw -18vw;}
    #rond6{transform:translate(32vw,11vw); background:url('http://ekladata.com/XTLYJa4nLI4fKXyEIDnH5xcDdfA@1152x648.jpg'); background-position:-32vw -11vw;}
    #rond7{transform:translate(41vw,4vw); background:url('http://ekladata.com/B8rRKpvGofIKiC-ZYqNMdPAoTKg@1152x648.jpg'); background-position:-41vw -4vw;}
    #rond8{transform:translate(41vw,18vw); background:url('http://ekladata.com/MGUTGGetjDH8erofv9tAYr4QFY0@1152x648.jpg'); background-position:-41vw -18vw;}
    #rond1:hover,#rond2:hover,#rond3:hover,#rond4:hover,#rond5:hover,#rond6:hover,#rond7:hover,#rond8:hover{z-index:10; width:60vw; height:33.75vw; transform:translate(0vw,0vw); background-position:0vw 0vw; border:none; box-shadow:none; border-radius:0%;}
    --></style>