• Montage 121

    Selon le paramétrage de votre blog (textes et images centrés ou non), il faut adapter la position de ce montage pour que l'agrandissement de l'image remplisse votre écran.

    C'est la raison pour laquelle j'ai positionné ce montage à gauche; 6 + 1 images en 16/9 mais vous pouvez en ajouter.

    Survol

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh 0; border: 0.6vh ridge white; background: url('http://ekladata.com/8v1Y1m_Viio7ke49CdUZyAgT0fs.jpg'); background-size: cover;">
    <p id="sol0">Survol</p>
    <p id="sol1" class="sol">&nbsp;</p>
    <p id="sol2" class="sol">&nbsp;</p>
    <p id="sol3" class="sol">&nbsp;</p>
    <p id="sol4" class="sol">&nbsp;</p>
    <p id="sol5" class="sol">&nbsp;</p>
    <p id="sol6" class="sol">&nbsp;</p>
    </div>

    <style><!--
    #sol0{position:absolute; z-index:1; width:10vw; text-align:center; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.3); transform:translate(0vw,0.5vw);}
    .sol{position:absolute; z-index:1; width:7vw; height:7vw; border-radius:50%; border:0.6vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transition:all 1s linear;}
    #sol1{box-sizing:border-box; background:url('http://ekladata.com/Anqpx1cCRTMTcGy-HzZQsAVWQ_Y.jpg'); background-size:cover; transform:translate(4vw,4vw);}
    #sol2{box-sizing:border-box; background:url('http://ekladata.com/VGh3Y9FUsG2e_y93n44bkZaUHUc.jpg'); background-size:cover; transform:translate(12vw,4vw);}
    #sol3{box-sizing:border-box; background:url('http://ekladata.com/3UetdhUmWMg-Jq0Rdr9_nHT-PkE.jpg'); background-size:cover; transform:translate(20vw,4vw);}
    #sol4{box-sizing:border-box; background:url('http://ekladata.com/TBifpboh8nGbp4M3Noc6Nc5XNTY.jpg'); background-size:cover; transform:translate(28vw,4vw);}
    #sol5{box-sizing:border-box; background:url('http://ekladata.com/kYEzVY1BP-Y7ageYXoPa07J3whs.jpg'); background-size:cover; transform:translate(36vw,4vw);}
    #sol6{box-sizing:border-box; background:url('http://ekladata.com/HHFzfGgkJeKXzoWapNrYiO34-no.jpg'); background-size:cover; transform:translate(44vw,4vw);}


    #sol1:hover,#sol2:hover,#sol3:hover,#sol4:hover,#sol5:hover,#sol6:hover{z-index:5; width:100vw; height:56.25vw; border:none; box-shadow:none; border-radius:0%; transform:translate(-1vw,-3vw);}
    --></style>