Vallée de la Roanne

Voici le code en 60vw par 33.75vw, soit 60% de la largeur de l'écran de lecture.

Il comporte 9 images, hébergées, chez moi, en 1920x1080px et qui sont adaptées  à vos dimensions de montage par le code.

Le sens de animation est modifiable, si vous le souhaitez.

Le paragraphe contenant les images fait, en largeur:3x60vw + quelques vw de sécurité et, en hauteur:3x33.75 + idem.

Ces dimensions sont à adapter au nombre d'images publiées.

Chaque clic fait se déplacer le paragraphe d'une largeur d'image (60vw + 0.2vw (?)) ou d'une hauteur d'image(33.75vw).

<div style="position: relative; width: 60vw; height: 33.75vw; margin: 2vh auto; border: 0.4vh ridge white; overflow: hidden;"><input id="bl1" class="bl" type="text" /> <input id="bl2" class="bl" type="text" /> <input id="bl3" class="bl" type="text" /> <input id="bl4" class="bl" type="text" /> <input id="bl5" class="bl" type="text" /> <input id="bl6" class="bl" type="text" /> <input id="bl7" class="bl" type="text" /> <input id="bl8" class="bl" type="text" /> <input id="bl9" class="bl" type="text" />
<p id="clic">Clic</p>
<p id="bz"><img class="bz0" src="http://ekladata.com/QM64EMYBdGfkFjTugR058Rcdueo.jpg" alt="" /> <img class="bz0" src="http://ekladata.com/3TkzDwTV_mmxpwvkcNc_hUpV2_Y.jpg" alt="" /> <img class="bz0" src="http://ekladata.com/mxKgpEqF9YSwAQf5f29ynCZTapc.jpg" alt="" /><br /> <img class="bz0" src="http://ekladata.com/KWCBizM31qG0hwk4ErtwZlJj8Tw.jpg" alt="" /> <img class="bz0" src="http://ekladata.com/1Qn_ynV_suHfeJsDuNIkaFhfVAY.jpg" alt="" /> <img class="bz0" src="http://ekladata.com/fdZx0e0Bn5B0LSmW43TnG7PLqKc.jpg" alt="" /><br /> <img class="bz0" src="http://ekladata.com/35sVdygMl4kWrv0yiyEVL5oG3Jg.jpg" alt="" /> <img class="bz0" src="http://ekladata.com/DQl_h9pugYTFJ1pC3VW3ZnundK4.jpg" alt="" /> <img class="bz0" src="http://ekladata.com/_V0m6IlEVe6bX4ocMQX10k6UKks.jpg" alt="" /></p>
</div>
<style><!--
.bl{position:absolute; width:60vw; height:33.75vw; transform:translate(0vw,0vw); background:transparent;}
#clic{position:absolute; z-index:2; width:5vw; height:2.5vw; background:rgba(0,0,0,0.5); transform:translate(0vw,0vw); font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black; text-align:center; line-height:2.5vw;}
#bz{position:absolute; z-index:1; width:185vw; height:105vw; transform:translate(0vw,0vw); transition:all 1s linear;}
.bz0{position:relative; z-index:1; width:60vw; height:33.75vw;}
#bl1{z-index:10;}
#bl1:focus ~ #bl2{z-index:11;}
#bl2:focus ~ #bl3{z-index:11;}
#bl3:focus ~ #bl4{z-index:11;}
#bl4:focus ~ #bl5{z-index:11;}
#bl5:focus ~ #bl6{z-index:11;}
#bl6:focus ~ #bl7{z-index:11;}
#bl7:focus ~ #bl8{z-index:11;}
#bl8:focus ~ #bl9{z-index:11;}

#bl1:focus ~ #bz{transform:translate(-60.2vw,0vw);}
#bl2:focus ~ #bz{transform:translate(-120.4vw,0vw);}
#bl3:focus ~ #bz{transform:translate(-120.4vw,-33.75vw);}
#bl4:focus ~ #bz{transform:translate(-120.4vw,-67.5vw);}
#bl5:focus ~ #bz{transform:translate(-60.2vw,-67.5vw);}
#bl6:focus ~ #bz{transform:translate(0vw,-67.5vw);}
#bl7:focus ~ #bz{transform:translate(0vw,-33.75vw);}
#bl8:focus ~ #bz{transform:translate(-60.2vw,-33.75vw);}
#bl9:focus ~ #bz{transform:translate(0vw,0vw);}
--></style>