-
Montage 85
Mon idée de départ était celle-ci.
Vous choisirez la version qui vous plaît.
<div style="position: relative; overflow: hidden; width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.6vh ridge white; text-align: left; background: linear-gradient(to bottom, rgba(200,150,100,0.8) 0%, rgba(0,100,100,0.3) 100%); background-size: cover;"><input id="bt1" class="bout" type="text" value="1" /><input id="bt2" class="bout" type="text" value="2" /><input id="bt3" class="bout" type="text" value="3" /><input id="bt4" class="bout" type="text" value="4" />
<p id="c1">Survol de chaque image pour l'agrandir; Clic sur chaque bouton pour changer les images.<br />Retour par un clic hors boutons.</p>
<p id="vc0a" class="vcx"> </p>
<p id="vc1a" class="vc1"> </p>
<p id="vc2a" class="vc1"> </p>
<p id="vc3a" class="vc1"> </p>
<p id="vc4a" class="vc1"> </p>
<p id="vc0b" class="vcy"> </p>
<p id="vc1b" class="vc2"> </p>
<p id="vc2b" class="vc2"> </p>
<p id="vc3b" class="vc2"> </p>
<p id="vc4b" class="vc2"> </p>
</div>
<style><!--
.bout{position:absolute; z-index:1; width:2vw; height:2vw; border-radius:50%; text-align:center; line-height:2vw; font-size:1.5vw; text-shadow:0.1vh 0.1vh black; box-shadow:inset 0.4vh 0.4vh 0.6vh black;}
#bt1{transform:translate(55vw,3vw);}
#bt2{transform:translate(55vw,7vw);}
#bt3{transform:translate(55vw,11vw);}
#bt4{transform:translate(55vw,15vw);}#c1{position:absolute; z-index:1; width:60vw; text-align:center; font-size:1vw; line-height:2vw; color:white; text-shadow:0.1vh 0.1vh black;}
.vcx{position:absolute; width:24vw; height:13.5vw; border:0.6vh solid white; transform:translate(4vw,4vw); transition:all 1s linear;}
#vc0a{z-index:1; background:url('http://ekladata.com/ebQ5Lmc7JqKrAB9GGmcFwGIAz_0.jpg'); background-position:-4vw -4vw; background-size:60vw 33.75vw;}
.vc1{position:absolute; width:24vw; height:13.5vw; border:0.6vh solid white; transform:translate(4vw,4vw) rotatey(90deg); transition:all 1s linear;}
#vc1a{z-index:2; background:url('http://ekladata.com/YVu273RE1L8Ydzl1EFeMxZozO0c.jpg'); background-position:-4vw -4vw; background-size:60vw 33.75vw;}
#vc2a{z-index:2; background:url('http://ekladata.com/lr5WgUsPREoVITDjL8awsT4X3m4.jpg'); background-position:-4vw -4vw; background-size:60vw 33.75vw;}
#vc3a{z-index:2; background:url('http://ekladata.com/xnaLpgLup_KEsxhJ0iBX2EAKCkI.jpg'); background-position:-4vw -4vw; background-size:60vw 33.75vw;}
#vc4a{z-index:2; background:url('http://ekladata.com/NSTDujDfyI4FSD8QVLr0NFKYEvE.jpg'); background-position:-4vw -4vw; background-size:60vw 33.75vw;}
.vcy{position:absolute; width:24vw; height:13.5vw; border:0.6vh solid white; transform:translate(32vw,18.5vw); transition:all 1s linear;}
#vc0b{z-index:1; background:url('http://ekladata.com/ym6mXpBEQfA8qf3jYVMy5qOs5UM.jpg'); background-position:-32vw -18.5vw; background-size:60vw 33.75vw;}
.vc2{position:absolute; width:24vw; height:13.5vw; border:0.6vh solid white; transform:translate(32vw,18.5vw) rotatey(90deg); transition:all 1s linear;}
#vc1b{z-index:2; background:url('http://ekladata.com/WiaZqJ69glsM1WUguLUWuM44Kzg.jpg'); background-position:-32vw -18.5vw; background-size:60vw 33.75vw;}
#vc2b{z-index:2; background:url('http://ekladata.com/DHlNL8Iv8MF9ihtM3oHmxyShDM0.jpg'); background-position:-32vw -18.5vw; background-size:60vw 33.75vw;}
#vc3b{z-index:2; background:url('http://ekladata.com/da75QW7aoXpkWtidwPfu-JuTK-c.jpg'); background-position:-32vw -18.5vw; background-size:60vw 33.75vw;}
#vc4b{z-index:2; background:url('http://ekladata.com/_l2W3gcruY8N3dDswot2t06sj6k.jpg'); background-position:-32vw -18.5vw; background-size:60vw 33.75vw;}#bt1:focus ~ #vc1a,#bt2:focus ~ #vc2a,#bt3:focus ~ #vc3a,#bt4:focus ~ #vc4a{z-index:3; transform:translate(4vw,4vw) rotatey(0deg);}
#bt1:focus ~ #vc1b,#bt2:focus ~ #vc2b,#bt3:focus ~ #vc3b,#bt4:focus ~ #vc4b{z-index:3; transform:translate(32vw,18.5vw) rotatey(0deg);}#vc0a:hover,#vc0b:hover,#bt1:focus ~ #vc1a:hover, #bt1:focus ~ #vc1b:hover,#bt2:focus ~ #vc2a:hover, #bt2:focus ~ #vc2b:hover,#bt3:focus ~ #vc3a:hover, #bt3:focus ~ #vc3b:hover,#bt4:focus ~ #vc4a:hover, #bt4:focus ~ #vc4b:hover{z-index:5; width:80vw; height:45vw; border:none; background-size:60vw 33.75vw; transform:translate(0vw,0vw); background-position:0vw 0vw; }
--></style>