• Exemple 94

     Clic; effacement un peu rapide...

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; text-align: left; background: url('http://ekladata.com/Akq8UN3beDNh2AMy9WAKRrlKhNA.jpg'); background-size: cover;"><input id="ng1" class="ng" type="text" value="1" /><input id="ng2" class="ng" type="text" value="2" /><input id="ng3" class="ng" type="text" value="3" /><input id="ng4" class="ng" type="text" value="4" /><input id="ng5" class="ng" type="text" value="5" /><input id="ng6" class="ng" type="text" value="6" /><input id="ng7" class="ng" type="text" value="7" /><input id="ng8" class="ng" type="text" value="8" /><input id="ng9" class="ng" type="text" value="9" />
    <p id="gh1a" class="gh">&nbsp;</p>
    <p id="gh1b" class="gh">&nbsp;</p>
    <p id="gh1c" class="gh">&nbsp;</p>
    <p id="gh1d" class="gh">&nbsp;</p>
    </div>
    <style><!--
    .ng{position:absolute; z-index:5; width:2vw; height:3.5vw; border:none; background:rgba(0,0,0,0.5); text-align:center; font-size:2vw; color:white!important; text-shadow:0.1vh 0.1vh black; line-height:3.5vw;}
    #ng1{transform:translate(58vw,0vw);}
    #ng2{transform:translate(58vw,3.5vw);}
    #ng3{transform:translate(58vw,7vw);}
    #ng4{transform:translate(58vw,10.5vw);}
    #ng5{transform:translate(58vw,14vw);}
    #ng6{transform:translate(58vw,17.5vw);}
    #ng7{transform:translate(58vw,21vw);}
    #ng8{transform:translate(58vw,24.5vw);}
    #ng9{transform:translate(58vw,28vw);}
    .gh{position:absolute; z-index:1; width:0vw; height:33.75vw; filter:grayscale(1); background-size:60vw 33.75vw;}
    #gh1a{background-position:0vw 0vw; transform:translate(60vw,0vw); transition: transform 1s linear, width 1s linear, filter 1s linear 1.5s;}
    #gh1b{background-position:-15vw 0vw; transform:translate(60vw,0vw); transition: transform 1s linear, width 1s linear, filter 1s linear 1.5s;}
    #gh1c{background-position:-30vw 0vw; transform:translate(60vw,0vw); transition: transform 1s linear, width 1s linear, filter 1s linear 1.5s;}
    #gh1d{background-position:-45vw 0vw; transform:translate(60vw,0vw); transition: transform 1s linear, width 1s linear, filter 1s linear 1.5s;}
    .ng:focus{background:rgba(100,255,255,0.5);}

    #ng1:focus ~ .gh{z-index:10; width:60vw; filter:grayscale(0); background:url('http://ekladata.com/s0jSKlBLM7Foxwh2R4j16fI3k9w.jpg');}
    #ng2:focus ~ .gh{z-index:10; width:60vw; filter:grayscale(0); background:url('http://ekladata.com/Kr9cMbPiWeXiw63KpVzAHb1bvyU.jpg');}
    #ng3:focus ~ .gh{z-index:10; width:60vw; filter:grayscale(0); background:url('http://ekladata.com/pvmmJ7uUR-b5YivwYWbtHCxfNx8.jpg');}
    #ng4:focus ~ .gh{z-index:10; width:60vw; filter:grayscale(0); background:url('http://ekladata.com/-KlnDOJ59msK2Y2t-yVyThOFcss.jpg');}
    #ng5:focus ~ .gh{z-index:10; width:60vw; filter:grayscale(0); background:url('http://ekladata.com/3nvwEt73vyiYBOhFGSfF6foDBBA.jpg');}
    #ng6:focus ~ .gh{z-index:10; width:60vw; filter:grayscale(0); background:url('http://ekladata.com/CppKH3cVJO6vqPAbPAcd6KIGK5o.jpg');}
    #ng7:focus ~ .gh{z-index:10; width:60vw; filter:grayscale(0); background:url('http://ekladata.com/z9Qv-1cDtg9bIoBvEmNc8MmMvQA.jpg');}
    #ng8:focus ~ .gh{z-index:10; width:60vw; filter:grayscale(0); background:url('http://ekladata.com/_vosfkVaz2zOnOvTRsQ7A6tneyc.jpg');}
    #ng9:focus ~ .gh{z-index:10; width:60vw; filter:grayscale(0); background:url('http://ekladata.com/M-mbGaXBpZTvX4yvm362_4HZIqY.jpg');}

    #ng1:focus ~ #gh1a,#ng2:focus ~ #gh1a,#ng3:focus ~ #gh1a,#ng4:focus ~ #gh1a,#ng5:focus ~ #gh1a,#ng6:focus ~ #gh1a,#ng7:focus ~ #gh1a,#ng8:focus ~ #gh1a,#ng9:focus ~ #gh1a{width:15vw; filter:grayscale(0); background-size:60vw 33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    #ng1:focus ~ #gh1b,#ng2:focus ~ #gh1b,#ng3:focus ~ #gh1b,#ng4:focus ~ #gh1b,#ng5:focus ~ #gh1b,#ng6:focus ~ #gh1b,#ng7:focus ~ #gh1b,#ng8:focus ~ #gh1b,#ng9:focus ~ #gh1b{width:15vw; filter:grayscale(0); background-size:60vw 33.75vw; background-position:-15vw 0vw; transform:translate(15vw,0vw);}
    #ng1:focus ~ #gh1c,#ng2:focus ~ #gh1c,#ng3:focus ~ #gh1c,#ng4:focus ~ #gh1c,#ng5:focus ~ #gh1c,#ng6:focus ~ #gh1c,#ng7:focus ~ #gh1c,#ng8:focus ~ #gh1c,#ng9:focus ~ #gh1c{width:15vw; filter:grayscale(0); background-size:60vw 33.75vw; background-position:-30vw 0vw; transform:translate(30vw,0vw);}
    #ng1:focus ~ #gh1d,#ng2:focus ~ #gh1d,#ng3:focus ~ #gh1d,#ng4:focus ~ #gh1d,#ng5:focus ~ #gh1d,#ng6:focus ~ #gh1d,#ng7:focus ~ #gh1d,#ng8:focus ~ #gh1d,#ng9:focus ~ #gh1d{width:15vw; filter:grayscale(0); background-size:60vw 33.75vw; background-position:-45vw 0vw; transform:translate(45vw,0vw);}
    --></style>