• Montage 30

    Faisant suite à ma page précédente et pour répondre à une demande, voici un montage de photos éparpillées, à agrandir au clic gauche enfoncé.

    Clic gauche enfoncé sur chaque photo.

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; border: 0.6vh ridge #8B4513; background: url('http://ekladata.com/EC7ehnSwYEUC3G8QzJvO4qs5IeI/dogclay.jpg'); margin: 1vh auto;">
    <p id="sc0">Clic gauche enfonc&eacute; sur chaque photo.</p>
    <p id="sc1" class="sc">&nbsp;</p>
    <p id="sc2" class="sc">&nbsp;</p>
    <p id="sc3" class="sc">&nbsp;</p>
    <p id="sc4" class="sc">&nbsp;</p>
    <p id="sc5" class="sc">&nbsp;</p>
    <p id="sc6" class="sc">&nbsp;</p>
    </div>

    <style><!--
    #sc0{position:absolute; z-index:1; width:25vw; text-align:center; font-size:1vw; color:white; text-shadow:0.2vh 0.2vh #8B4513; transform:translate(1vw,0vw);}

    .sc{position:absolute; z-index:1; box-sizing:border-box; width:15vw; height:15vw; border-bottom: 5vh solid white; border-left: 1vh solid white; border-right: 1vh solid white; border-top: 1vh solid white; box-shadow: 0 0 0 0.2vh black;transition:all 1s linear;}
    #sc1{background: url('http://ekladata.com/t85TnUYiSTy_IImeYnMUzQI8vTA@1152x648.jpg'); background-size: 26vw 15vw; background-position: 50% 50%; transform:translate(5vw,5vw) rotate(10deg); }
    #sc2{background: url('http://ekladata.com/pMdk5i-VdsQdzMK7lUkpsvx_T4c@1152x648.jpg'); background-size: 26vw 15vw; background-position: 50% 50%; transform:translate(10vw,12vw) rotate(-10deg); }
    #sc3{background: url('http://ekladata.com/AqUOoBhNHU-wrEvt0T6uM2qeG6Q@1152x648.jpg'); background-size: 26vw 15vw; background-position: 50% 50%; transform:translate(20vw,2vw) rotate(-3deg); }
    #sc4{background: url('http://ekladata.com/ItC1gRTkUBNat0h_RMeZ8N6MKcg@1152x648.jpg'); background-size: 26vw 15vw; background-position: 50% 50%; transform:translate(25vw,12vw) rotate(10deg); }
    #sc5{background: url('http://ekladata.com/9bkiBneH38TKoSqM3S0T2FbjN24@1152x648.jpg'); background-size: 26vw 15vw; background-position: 50% 50%; transform:translate(35vw,5vw) rotate(3deg); }
    #sc6{background: url('http://ekladata.com/6pnei08uCb42ozlfjowAeP0BYDo@1152x648.jpg'); background-size: 26vw 15vw; background-position: 50% 50%; transform:translate(40vw,12vw) rotate(-10deg); }

    #sc1:active,#sc2:active,#sc3:active,#sc4:active,#sc5:active,#sc6:active{z-index:10;width:60vw; height:33.75vw; border:none;transform:translate(0vw,0vw) rotate(0deg);background-size:60vw 33.75vw; box-shadow:none;}
    --></style>

    Mes images, hébergées sur Ekla en 1920px par 1080px sont redimensionnées en 1152px par 648px pour en limiter le poids au transfert; attention de bien remplacer mes adresses en bleu avant le @1152x648.jpg en ne prenant que vos adresses avant le .jpg.

    Le nombre d'images est à votre convenance ainsi que leur taille et disposition.