• Plein Ecran 16

    Clic pour ouvrir et Clic pour refermer.

     

     

     

     

     

     

     

     


    <div style="width:60vw; height:33.75vw; margin:1vh auto; border:0.4vh ridge grey; background: url('http://ekladata.com/HdZ4KkUFOzeAsxNTJ2kAL5HGtF4/whitewater.jpg'); background-size: cover; text-align:left;">
    <input id="sol1" class="sol" type="text">
    <input id="sol2" class="sol" type="text">
    <input id="sol3" class="sol" type="text">
    <input id="sol4" class="sol" type="text">
    <input id="sol5" class="sol" type="text">
    <input id="sol6" class="sol" type="text">
    <input id="sol7" class="sol" type="text">
    <input id="sol8" class="sol" type="text">
    <p id="agr1" class="agr">&nbsp;</p>
    <p id="agr2" class="agr">&nbsp;</p>
    <p id="agr3" class="agr">&nbsp;</p>
    <p id="agr4" class="agr">&nbsp;</p>
    <p id="agr5" class="agr">&nbsp;</p>
    <p id="agr6" class="agr">&nbsp;</p>
    <p id="agr7" class="agr">&nbsp;</p>
    <p id="agr8" class="agr">&nbsp;</p>
    </div>
    <style><!--
    .sol{position:absolute; z-index:5; width:6vw; height:33.75vw; background:transparent; border:none;}
    #sol1{transform:translate(2.5vw,0vw);}
    #sol2{transform:translate(9.5vw,0vw);}
    #sol3{transform:translate(16.5vw,0vw);}
    #sol4{transform:translate(23.5vw,0vw);}
    #sol5{transform:translate(30.5vw,0vw);}
    #sol6{transform:translate(37.5vw,0vw);}
    #sol7{transform:translate(44.5vw,0vw);}
    #sol8{transform:translate(51.5vw,0vw);}
    .agr{position:absolute; z-index:1;width:6vw; height:33.75vw; transition:all 1s linear;}
    #agr1{background:url('http://ekladata.com/OjvOPWTHV4lbZyJsRkT0MObT4UU.jpg'); background-position:-2.5vw 0vw; background-size:100vw 56.25vw; transform:translate(2.5vw,0vw);}
    #agr2{background:url('http://ekladata.com/oYZXQuUulJFaZ5Wv34hVT42Y1No.jpg'); background-position:-9.5vw 0vw; background-size:100vw 56.25vw; transform:translate(9.5vw,0vw);}
    #agr3{background:url('http://ekladata.com/jto6VSznU9wA0_DeEV1eDvISN8E.jpg'); background-position:-16.5vw 0vw; background-size:100vw 56.25vw; transform:translate(16.5vw,0vw);}
    #agr4{background:url('http://ekladata.com/zNcpcBdTD-Xe7IxkfPm7Cpn1DR0.jpg'); background-position:-23.5vw 0vw; background-size:100vw 56.25vw; transform:translate(23.5vw,0vw);}
    #agr5{background:url('http://ekladata.com/8kTVa1sNI6FoMFv-GL-Mk3hxlu0.jpg'); background-position:-30.5vw 0vw; background-size:100vw 56.25vw; transform:translate(30.5vw,0vw);}
    #agr6{background:url('http://ekladata.com/QpcB6k2U2uP3Wws7RwH7JzAoTQw.jpg'); background-position:-37.5vw 0vw; background-size:100vw 56.25vw; transform:translate(37.5vw,0vw);}
    #agr7{background:url('http://ekladata.com/0efMJj-Ty_1txSv0CjdyORAwh6k.jpg'); background-position:-44.5vw 0vw; background-size:100vw 56.25vw; transform:translate(44.5vw,0vw);}
    #agr8{background:url('http://ekladata.com/_tfPpFOkdECR04cmBjDy4cXRQx8.jpg'); background-position:-51.5vw 0vw; background-size:100vw 56.25vw; transform:translate(51.5vw,0vw);}
    #sol1:focus ~ #agr1,#sol2:focus ~ #agr2,#sol3:focus ~ #agr3,#sol4:focus ~ #agr4,#sol5:focus ~ #agr5,#sol6:focus ~ #agr6,#sol7:focus ~ #agr7,#sol8:focus ~ #agr8{z-index:100; width:100vw; height:56.25vw; left:0; transform: translate(0vw,0vw); background-position:0vw,0vw;}
    --></style>