• Montage 25

     

    Puisque ce genre de montage a bien plu, en voici une variante, par la forme des vignettes: l'ermitage de Rosans 05150.

     

     

     

     

     

     

     

     

     

    Clic maintenu sur fond et vignettes.

    <div style="width: 60vw; height: 33.75vw; border: 0.4vh solid white; margin: 1vh auto;">
    <p id="pp1">&nbsp;</p>
    <p id="pp2" class="ppa">&nbsp;</p>
    <p id="pp3" class="ppa">&nbsp;</p>
    <p id="pp4" class="ppa">&nbsp;</p>
    <p id="pp5" class="ppa">&nbsp;</p>
    <p id="pp6" class="ppa">&nbsp;</p>
    <p id="pp7" class="ppa">&nbsp;</p>
    <p id="pp8" class="ppa">&nbsp;</p>
    <p id="pp9" class="ppa">&nbsp;</p>
    <p id="ex">Clic maintenu sur fond et vignettes.</p>
    </div>
    <style><!--
    #pp1{position:absolute; z-index:1; width:60vw; height:33.75vw; border:0.4vh solid white; transition:all 1s linear;transform:translate(0vw,0vw); box-sizing:border-box; background:url('http://ekladata.com/BUnIdRvjhPqOpB-JeLZwbSKo2t0@1152x648.jpg'); background-size:cover;}
    .ppa{position:absolute; z-index:5; width:8vw; height:8vw; border-radius:50%; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.8vh black; transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s,filter 1s linear 1s;}
    #pp2{transform:translate(15vw,5vw); box-sizing:border-box; background:url('http://ekladata.com/tl3d05mVbs8_MbFkpgiomqw0XLU@1152x648.jpg'); background-size:cover; -webkit-filter:grayscale(1); filter:grayscale(1);}
    #pp3{transform:translate(26vw,2vw); box-sizing:border-box; background:url('http://ekladata.com/KQnC6H5GLqqIW9ZOkseHcJQG-jE@1152x648.jpg'); background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1);}
    #pp4{transform:translate(37vw,5vw); box-sizing:border-box; background:url('http://ekladata.com/idSMNb4xRFds62lXMyevaX7NSaA@1152x648.jpg'); background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1);}
    #pp5{transform:translate(8vw,12vw); box-sizing:border-box; background:url('http://ekladata.com/j0EIOyC7PXwRjN6phk5UpYAX1fM@1152x648.jpg'); background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1);}
    #pp6{transform:translate(44vw,12vw); box-sizing:border-box; background:url('http://ekladata.com/4wBfonEqYNNPYVG9k6Mj-97ttw4@1152x648.jpg'); background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1);}
    #pp7{transform:translate(15vw,20vw); box-sizing:border-box; background:url('http://ekladata.com/lVa_PzyTxKf3HLHmV-OzmBfCsV4@1152x648.jpg'); background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1);}
    #pp8{transform:translate(37vw,20vw); box-sizing:border-box; background:url('http://ekladata.com/niUS3SAiwDdlul0AZ2DTTXqoPwc@1152x648.jpg'); background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1);}
    #pp9{transform:translate(26vw,24vw); box-sizing:border-box; background:url('http://ekladata.com/TFEdkCZ3BT0zAsC60_hyHkrAWOs@1152x648.jpg'); background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1);}

    #ex{position:absolute; z-index:1; width:25vw; transform:translate(35vw,1vw); text-align:center; font-size:1vw; color:white; text-shadow:0.1vh 0.1vh black;}
    #pp1:active,#pp2:active,#pp3:active,#pp4:active,#pp5:active,#pp6:active,#pp7:active,#pp8:active,#pp9:active{z-index:10; width:60vw; height:33.75vw; transform:translate(0vw,0vw); border-radius:0%; -webkit-filter:grayscale(0);filter:grayscale(0); box-shadow:none;}
    --></style>

    Quelles que soient les dimensions de vos images, elles sont redimensionnées en 1152x648px et leur poids réduit en conséquence.

    Ne remplacez que la partie en bleu de mes adresses par l'équivalent des vôtres.