• Exemple 6

    En utilisant l'attribut background-position, on peut agrandir les image à partir de la partie affichée.

    Ici, 8 images au ratio 16/9, redimensionnées dans le code en 1152x648 px.

    Survol

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left; background: linear-gradient( to bottom, grey 0%, pink 100%);">
    <p id="for0">Survol</p>
    <p id="for1" class="for">&nbsp;</p>
    <p id="for2" class="for">&nbsp;</p>
    <p id="for3" class="for">&nbsp;</p>
    <p id="for4" class="for">&nbsp;</p>
    <p id="for5" class="for">&nbsp;</p>
    <p id="for6" class="for">&nbsp;</p>
    <p id="for7" class="for">&nbsp;</p>
    <p id="for8" class="for">&nbsp;</p>
    </div>

    <style><!--

    #for0{position:absolute; z-index:1; width:10vw; transform:translate(25vw,0vw); font-size:2vw; color:coral; text-shadow:0.1vh 0.1vh black;}
    .for{position:absolute; z-index:1; transition:all 1s linear;}
    #for1{width:10vw; height:10vw; border:0.6vh ridge white; background:url('http://ekladata.com/S0-wTihNqmnCJIMDGSUlvqUI_4w@1152x648.jpg'); transform:translate(2vw,2vw); background-position:-2vw -2vw;}
    #for2{width:10vw; height:3vw; border:0.6vh ridge white; background:url('http://ekladata.com/mitsxdrKJaxynxIltfwijXvoWIg@1152x648.jpg'); transform:translate(20vw,8vw); background-position:-20vw -8vw;}
    #for3{width:3vw; height:10vw; border:0.6vh ridge white; background:url('http://ekladata.com/pr0i9o7_PqRfGEivz1TgLesRVSo@1152x648.jpg'); transform:translate(10vw,22vw); background-position:-10vw -22vw;}
    #for4{width:10vw; height:10vw; border-radius:50%; border:0.6vh ridge white; background:url('http://ekladata.com/QXoNRU7MdVSrGKeVIrBvfkweUzo@1152x648.jpg'); transform:translate(42vw,2vw); background-position:-42vw -2vw;}
    #for5{width:10vw; height:3vw; border-radius:50%; border:0.6vh ridge white; background:url('http://ekladata.com/1Mesnf7YnKSDhuLt-Me4Pjpp828@1152x648.jpg'); transform:translate(35vw,15vw); background-position:-35vw -15vw;}
    #for6{width:3vw; height:10vw; border-radius:50%; border:0.6vh ridge white; background:url('http://ekladata.com/FSN-GMyWIa02G7gY0Vvmun4FeF0@1152x648.jpg'); transform:translate(30vw,18vw); background-position:-30vw -18vw;}
    #for7{width:10vw; height:3vw; border-radius:50% 40% 30% 20%; border:0.6vh ridge white; background:url('http://ekladata.com/t6XoHit1i3TX2pHoHwQpRFNoC0Q@1152x648.jpg'); transform:translate(15vw,17vw); background-position:-15vw -17vw;}
    #for8{width:3vw; height:10vw; border-radius:20%; border:0.6vh ridge white; background:url('http://ekladata.com/Vl-u0L4a8NW8sl5EIag3ol3OKCY@1152x648.jpg'); transform:translate(52vw,18vw); background-position:-52vw -18vw;}
    #for1:hover,#for2:hover,#for3:hover,#for4:hover,#for5:hover,#for6:hover,#for7:hover,#for8:hover{z-index:10; width:60vw; height:33.75vw; transform:translate(0vw,0vw); background-position:0vw 0vw; border-radius:0%;}
    --></style>