• Montage 85

    Mon idée de départ était celle-ci.

    Vous choisirez la version qui vous plaît.

    Survol de chaque image pour l'agrandir; Clic sur chaque bouton pour changer les images.
    Retour par un clic hors boutons.

     

     

     

     

     

     

     

     

     

     


    <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">&nbsp;</p>
    <p id="vc1a" class="vc1">&nbsp;</p>
    <p id="vc2a" class="vc1">&nbsp;</p>
    <p id="vc3a" class="vc1">&nbsp;</p>
    <p id="vc4a" class="vc1">&nbsp;</p>
    <p id="vc0b" class="vcy">&nbsp;</p>
    <p id="vc1b" class="vc2">&nbsp;</p>
    <p id="vc2b" class="vc2">&nbsp;</p>
    <p id="vc3b" class="vc2">&nbsp;</p>
    <p id="vc4b" class="vc2">&nbsp;</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>