• Plein écran 7

    Clic sur vignette pour affichage grande image et clic sur grande image pour retour.

    Comme vous le voyez dans le code, la même adresse d'image est utilisée pour la vignette et pour la grande image correspondante.

    Afin que la "requête" (demande de transfert) ne soit pas trop longue, la vignette utilise une même adresse dimensionnée en 230px par 130px et la grande image est, dans mon cas, dimensionnée et hébergée en 1920px par 1080px.

    <div style="width: 60vw; height: 16vw; margin: 1vh auto; text-align: left;"><input id="vig1" class="vig" type="text" /> <input id="vig2" class="vig" type="text" /> <input id="vig3" class="vig" type="text" /> <input id="vig4" class="vig" type="text" /> <input id="vig5" class="vig" type="text" /> <input id="vig6" class="vig" type="text" /> <input id="vig7" class="vig" type="text" /> <input id="vig8" class="vig" type="text" /> <img id="gde1" class="gde" src="http://ekladata.com/jPpMHynGDS68eXY4N32KvM3hRP0.jpg" alt="" /> <img id="gde2" class="gde" src="http://ekladata.com/xxzKs2vd_OkbV471is1ZVU_mxtA.jpg" alt="" /> <img id="gde3" class="gde" src="http://ekladata.com/1qMZx3gkGyN5xKC2J4nMvK1R3SE.jpg" alt="" /> <img id="gde4" class="gde" src="http://ekladata.com/aqvI4SQgi-Bbpd2jFYIEi0FrdU8.jpg" alt="" /> <img id="gde5" class="gde" src="http://ekladata.com/FJEbotwwukzLyqusQ20qEsWjJZI.jpg" alt="" /> <img id="gde6" class="gde" src="http://ekladata.com/imfN1PTXVQAl7T1HI3wS6UYcJoM.jpg" alt="" /> <img id="gde7" class="gde" src="http://ekladata.com/BPqH1OAUVCGFYM46qzB205l5GnU.jpg" alt="" /> <img id="gde8" class="gde" src="http://ekladata.com/PL21ZzQ62K0e58jAI3ZkYOOOmDc.jpg" alt="" /></div>
    <style><!--
    .vig{position:absolute; z-index:1: width:12vw; height:6.75vw; border:0.3vh solid black; box-shadow:inset -0.3vh -0.3vh 0.5vh white, inset 0.3vh 0.3vh 0.5vh black; background-size:cover; border-radius:2vw;}
    #vig1{box-sizing:border-box; transform:translate(3vw,0vw); background:url('http://ekladata.com/jPpMHynGDS68eXY4N32KvM3hRP0@230x130.jpg');}
    #vig2{box-sizing:border-box; transform:translate(17vw,0vw); background:url('http://ekladata.com/xxzKs2vd_OkbV471is1ZVU_mxtA@230x130.jpg');}
    #vig3{box-sizing:border-box; transform:translate(31vw,0vw); background:url('http://ekladata.com/1qMZx3gkGyN5xKC2J4nMvK1R3SE@230x130.jpg');}
    #vig4{box-sizing:border-box; transform:translate(45vw,0vw); background:url('http://ekladata.com/aqvI4SQgi-Bbpd2jFYIEi0FrdU8@230x130.jpg');}
    #vig5{box-sizing:border-box; transform:translate(3vw,8.75vw); background:url('http://ekladata.com/FJEbotwwukzLyqusQ20qEsWjJZI@230x130.jpg');}
    #vig6{box-sizing:border-box; transform:translate(17vw,8.75vw); background:url('http://ekladata.com/imfN1PTXVQAl7T1HI3wS6UYcJoM@230x130.jpg');}
    #vig7{box-sizing:border-box; transform:translate(31vw,8.75vw); background:url('http://ekladata.com/BPqH1OAUVCGFYM46qzB205l5GnU@230x130.jpg');}
    #vig8{box-sizing:border-box; transform:translate(45vw,8.75vw); background:url('http://ekladata.com/PL21ZzQ62K0e58jAI3ZkYOOOmDc@230x130.jpg');}
    .gde{position:absolute; z-index:100; width:100vw; height:56.25vw; transform:rotatey(90deg); left:0; top:0; filter:grayscale(1); -webkit-filter:grayscale(1);transition:transform 1s linear 0s, filter 1s linear 1s;}
    #vig1:focus ~ #gde1,#vig2:focus ~ #gde2,#vig3:focus ~ #gde3,#vig4:focus ~ #gde4,#vig5:focus ~ #gde5,#vig6:focus ~ #gde6,#vig7:focus ~ #gde7,#vig8:focus ~ #gde8{transform:rotate(0deg); filter:grayscale(0); -webkit-filter:grayscale(0);}
    --></style>