• Exemple 122

     Au clic avec affichage en plein écran ici, mais vous pouvez réduire l'affichage (ex:60vw=60%) mais sans avoir besoin d'un bouton pour le retour, un clic sur l'image agrandie suffit.

    Le clic sur un élément cliqué ne fonctionne pas mais si vous cliquez sur un autre élément, le premier clic est annulé.

    J'ai gardé le même montage par facilité mais vous pouvez présenter votre article comme bon vous semble; chaque adresse d'image est utilisée deux fois, une fois en bouton et une fois en grande image.

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left;"><input id="ois1" class="ois" src="http://ekladata.com/6SRh8-i1E3r2ta7MWmUIIZMYuYA.jpg" type="image" /> <input id="ois2" class="ois" src="http://ekladata.com/5AzK76zeqxc84gK-hy4UAX1MSs0.jpg" type="image" /> <input id="ois3" class="ois" src="http://ekladata.com/42ngHLWDFhEnxNt5HqKcJbJwWiY.jpg" type="image" /> <input id="ois4" class="ois" src="http://ekladata.com/9_X4aat5wOb_l_vWeFfwhsgGUFM.jpg" type="image" /> <input id="ois5" class="ois" src="http://ekladata.com/Svq4rgjR1mnwvK7VQrkskT4u-pM.jpg" type="image" /> <img id="gf1" class="gf" src="http://ekladata.com/6SRh8-i1E3r2ta7MWmUIIZMYuYA.jpg" alt="" /> <img id="gf2" class="gf" src="http://ekladata.com/5AzK76zeqxc84gK-hy4UAX1MSs0.jpg" alt="" /> <img id="gf3" class="gf" src="http://ekladata.com/42ngHLWDFhEnxNt5HqKcJbJwWiY.jpg" alt="" /> <img id="gf4" class="gf" src="http://ekladata.com/9_X4aat5wOb_l_vWeFfwhsgGUFM.jpg" alt="" /> <img id="gf5" class="gf" src="http://ekladata.com/Svq4rgjR1mnwvK7VQrkskT4u-pM.jpg" alt="" /></div>

    <style><!--
    .ois{position:absolute; z-index:1; width:60vw; height:33.75vw;}
    #ois1{background-size:60vw 33.75vw; clip-path:polygon(10vw 2vw,20vw 2vw,24vw 8.5vw,20vw 16vw, 10vw 16vw, 6vw 8.5vw);}
    #ois2{background-size:60vw 33.75vw; clip-path:polygon(10vw 17vw,20vw 17vw,24vw 23.5vw,20vw 31vw, 10vw 31vw, 6vw 23.5vw);}
    #ois3{background-size:60vw 33.75vw; clip-path:polygon(25vw 9vw,35vw 9vw,39vw 16.5vw,35vw 23vw, 25vw 23vw, 21vw 16.5vw);}
    #ois4{background-size:60vw 33.75vw; clip-path:polygon(40vw 2vw,50vw 2vw,54vw 8.5vw,50vw 16vw, 40vw 16vw, 36vw 8.5vw);}
    #ois5{background-size:60vw 33.75vw; clip-path:polygon(40vw 17vw,50vw 17vw,54vw 23.5vw,50vw 31vw, 40vw 31vw, 36vw 23.5vw);}
    .gf{position:absolute; z-index:100; left:0; width:100vw; height:0vw; filter:grayscale(1); transition:all 1s linear 0s, filter 1s linear 1s;}
    #ois1:focus ~ #gf1,#ois2:focus ~ #gf2,#ois3:focus ~ #gf3,#ois4:focus ~ #gf4,#ois5:focus ~ #gf5{z-index:5; left:0; height:56.25vw; filter:grayscale(0);}
    --></style>