• dans le volcan 4

    Code en 60vw par 33.75vw (16/9). 9 images au ratio 16/9 redimensionnées en 1152x648px dans le code.

    Survol

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.755vw; border: 0.4vh solid grey; margin: 1vh auto; background: radial-gradient(ellipse at center, #cedce7 0%,#596a72 100%); text-align: left;">
    <p id="rd0">Survol</p>
    <p id="rd1">&nbsp;</p>
    <p id="rd2" class="rda">&nbsp;</p>
    <p id="rd3" class="rda">&nbsp;</p>
    <p id="rd4" class="rda">&nbsp;</p>
    <p id="rd5" class="rda">&nbsp;</p>
    <p id="rd6" class="rdb">&nbsp;</p>
    <p id="rd7" class="rdb">&nbsp;</p>
    <p id="rd8" class="rdb">&nbsp;</p>
    <p id="rd9" class="rdb">&nbsp;</p>
    </div>
    <style><!--
    #rd0{position:absolute; z-index:1; width:12vw; text-align:center; font-size:2vw; color:white!important; text-shadow:0.2vh 0.2vh black; transform:translate(25vw,1vw);}
    #rd1{position:absolute; z-index:5; width:17vw; height:17vw; border-radius:50%; border:0.4vh solid white; box-shadow:inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white; background:url('http://ekladata.com/39W82PHfwGntUZjJpIoTgACltV4@1152x648.jpg'); background-position:-22vw -8vw; transform:translate(22vw,8vw); transition:all 1.5s linear;}
    .rda{position:absolute; z-index:4; width:11vw; height:11vw; border-radius:50%;border:0.4vh solid white; box-shadow:inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white;transition:all 1.5s linear;}
    #rd2{background:url('http://ekladata.com/S-iI_oafcx9TFbFXNRV5ET_7TJs@1152x648.jpg'); background-position:-15vw -4vw; transform:translate(15vw,4vw);}
    #rd3{background:url('http://ekladata.com/FHnQ_MoWkWXp1Rt4w0-kPVvZc0E@1152x648.jpg'); background-position:-34vw -4vw; transform:translate(34vw,4vw);}
    #rd4{background:url('http://ekladata.com/sZGbo5edhYpvp53mxQmd_j-QnUs@1152x648.jpg'); background-position:-15vw -16vw; transform:translate(15vw,16vw);}
    #rd5{background:url('http://ekladata.com/ZAGq8dUxYO_qoqPwz-yIUXk_9Dc@1152x648.jpg'); background-position:-34vw -16vw; transform:translate(34vw,16vw);}
    .rdb{position:absolute; z-index:3; width:8vw; height:8vw; border-radius:50%;border:0.4vh solid white; box-shadow:inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white;transition:all 1.5s linear;}
    #rd6{background:url('http://ekladata.com/IYvFCTgHKMf7Grd0hL2jpbmOXhA@1152x648.jpg'); background-position:-11vw -2vw; transform:translate(11vw,2vw);}
    #rd7{background:url('http://ekladata.com/0639_EH4sOmLoKODr8eqTMs4Iqg@1152x648.jpg'); background-position:-40vw -2vw; transform:translate(40vw,2vw);}
    #rd8{background:url('http://ekladata.com/3lFVoD-n5PsNCxDz82aPC-6gvfU@1152x648.jpg'); background-position:-11vw -22vw; transform:translate(11vw,22vw);}
    #rd9{background:url('http://ekladata.com/C2UZQ2-9MhvKP5rIe8zmHOaNkGg@1152x648.jpg'); background-position:-40vw -22vw; transform:translate(40vw,22vw);}
    #rd1:hover,#rd2:hover,#rd3:hover,#rd4:hover,#rd5:hover,#rd6:hover,#rd7:hover,#rd8:hover,#rd9:hover{z-index:10; width:60vw; height:33.75vw; border-radius:0%; transform:translate(0vw,0vw); background-position:0vw 0vw;}
    --></style>