• Montage 64

    Remplacez les adresses de mes images (fond:rouge et anim bleu) par les vôtres au ratio 16/9.

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; border: 0.5vh ridge white; margin: 1vh auto; background: url('http://ekladata.com/FtzOrflSptMAn6g58KAbDiiYIcQ.jpg'); background-size: cover; text-align: left;"><input id="x1" type="text" value="Clic ICI puis survol sections jusqu'&agrave; coloration." />
    <p id="y1" class="y">&nbsp;</p>
    <p id="y2" class="y">&nbsp;</p>
    <p id="y3" class="y">&nbsp;</p>
    <p id="y4" class="y">&nbsp;</p>
    <p id="y5" class="y">&nbsp;</p>
    <p id="y6" class="y">&nbsp;</p>
    </div>
    <style><!--
    #x1{position:absolute; z-index:1; width:40vw; text-align:center; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(10vw,1vw);}
    .y{position:absolute; z-index:2; width:7vw; height:0vw; filter:grayscale(1); -webkit-filter:grayscale(1); transition:transform 1s linear 0s, height 1s linear 0s, width 1s linear 0s, background 1s linear 0s, filter 1s linear 1s;}
    #y1{box-sizing:border-box; transform:translate(0vw,33.75vw); background:url('http://ekladata.com/TkZxOBRZsGg7i2b0Y5w3XfbPtD0.jpg'); background-size:60vw 33.75vw; background-position:0vw 0vw;}
    #y2{box-sizing:border-box; transform:translate(10vw,33.75vw); background:url('http://ekladata.com/1PSSVQ9NZO6Mvx5PwQiOnsCvitQ.jpg'); background-size:60vw 33.75vw; background-position:-10vw 0vw;}
    #y3{box-sizing:border-box; transform:translate(20vw,33.75vw); background:url('http://ekladata.com/Vvc6sI1VvF09MB-uyviCHFnwLn4.jpg'); background-size:60vw 33.75vw; background-position:-20vw 0vw;}
    #y4{box-sizing:border-box; transform:translate(30vw,33.75vw); background:url('http://ekladata.com/5uh-WH7K0LJK6b9q_UzK_U_ycC0.jpg'); background-size:60vw 33.75vw; background-position:-30vw 0vw;}
    #y5{box-sizing:border-box; transform:translate(40vw,33.75vw); background:url('http://ekladata.com/QVXBUPhWZEqczPjiMPNOZpouneU.jpg'); background-size:60vw 33.75vw; background-position:-40vw 0vw;}
    #y6{box-sizing:border-box; transform:translate(50vw,33.75vw); background:url('http://ekladata.com/dbKe8-f10lliPTl2ndd6cSYZUXs.jpg'); background-size:60vw 33.75vw; background-position:-50vw 0vw;}
    #x1:focus ~ #y1{height:33.75vw; border:0.3vh solid black; transform:translate(0vw,0vw);}
    #x1:focus ~ #y2{height:33.75vw; border:0.3vh solid black; transform:translate(10vw,0vw);}
    #x1:focus ~ #y3{height:33.75vw; border:0.3vh solid black; transform:translate(20vw,0vw);}
    #x1:focus ~ #y4{height:33.75vw; border:0.3vh solid black; transform:translate(30vw,0vw);}
    #x1:focus ~ #y5{height:33.75vw; border:0.3vh solid black; transform:translate(40vw,0vw);}
    #x1:focus ~ #y6{height:33.75vw; border:0.3vh solid black; transform:translate(50vw,0vw);}

    #x1:focus ~#y1:hover,#x1:focus ~#y2:hover,#x1:focus ~#y3:hover,#x1:focus ~#y4:hover,#x1:focus ~#y5:hover,#x1:focus ~#y6:hover{z-index:10; width:60vw; border:none; transform:translate(0vw,0vw); filter:grayscale(0);-webkit-filter:grayscale(0); background-position:0vw 0vw;}
    --></style>