• Exemple 131

    Une présentation simple sans doute déjà proposée: 8 images au ratio 16/9; SURVOL. 

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
    <p id="pata1" class="pata">&nbsp;</p>
    <p id="pata2" class="pata">&nbsp;</p>
    <p id="pata3" class="pata">&nbsp;</p>
    <p id="pata4" class="pata">&nbsp;</p>
    <p id="pata5" class="pata">&nbsp;</p>
    <p id="pata6" class="pata">&nbsp;</p>
    <p id="pata7" class="pata">&nbsp;</p>
    <p id="pata8" class="pata">&nbsp;</p>
    </div>
    <style><!--
    .pata{position:absolute; z-index:1; width:15vw; height:30vw; border:0.3vh solid white; border-radius:50%; box-shadow:inset 0.4vh 0.4vh 6vh black; transition:all 1s linear;}
    #pata1{background:url('http://ekladata.com/WyH1dBxDbXUVH-w7XLnTLsIge8U.jpg'); background-position:-5vw -1.75vw; background-size:60vw 33.75vw; transform:translate(5vw,1.75vw);}
    #pata2{background:url('http://ekladata.com/MlgBFJgdPJnjtgexBqhC4wd5qfw.jpg'); background-position:-10vw -1.75vw; background-size:60vw 33.75vw; transform:translate(10vw,1.75vw);}
    #pata3{background:url('http://ekladata.com/5ZC3Jtlr7bkg2eanwlicvGvCmVs.jpg'); background-position:-15vw -1.75vw; background-size:60vw 33.75vw; transform:translate(15vw,1.75vw);}
    #pata4{background:url('http://ekladata.com/01DbHUwru3Elnli7Wxkv9WwzaOM.jpg'); background-position:-20vw -1.75vw; background-size:60vw 33.75vw; transform:translate(20vw,1.75vw);}
    #pata5{background:url('http://ekladata.com/ofv1QOaXDfIH6i2JE-RjSrDHMO4.jpg'); background-position:-25vw -1.75vw; background-size:60vw 33.75vw; transform:translate(25vw,1.75vw);}
    #pata6{background:url('http://ekladata.com/o0ESY5Qz2Vf4GPU9nL7UDMVP5Ws.jpg'); background-position:-30vw -1.75vw; background-size:60vw 33.75vw; transform:translate(30vw,1.75vw);}
    #pata7{background:url('http://ekladata.com/fc5q8BcdUiHrMlRp3SscxxU4ZxM.jpg'); background-position:-35vw -1.75vw; background-size:60vw 33.75vw; transform:translate(35vw,1.75vw);}
    #pata8{background:url('http://ekladata.com/WszhfnkD_-Nv_aniPZOnT5msxtw.jpg'); background-position:-40vw -1.75vw; background-size:60vw 33.75vw; transform:translate(40vw,1.75vw);}
    #pata1:hover,#pata2:hover,#pata3:hover,#pata4:hover,#pata5:hover,#pata6:hover,#pata7:hover,#pata8:hover{z-index:15; width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw); border-radius:0%;}
    --></style>