• Plein Ecran 25

    Survol et clic.


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; background: linear-gradient(to bottom, rgba(102,102,102,1) 0%, rgba(102,102,50,0.5) 100%); text-align: left;"><input id="bzk1" class="bzk" type="text" /> <input id="bzk2" class="bzk" type="text" /> <input id="bzk3" class="bzk" type="text" /> <input id="bzk4" class="bzk" type="text" /> <input id="bzk5" class="bzk" type="text" /> <input id="bzk6" class="bzk" type="text" /> <input id="bzk7" class="bzk" type="text" /> <input id="bzk8" class="bzk" type="text" /> <img id="gm1" class="gm" src="http://ekladata.com/AmI5V603DLtSa-wCika7n7sFQUk.jpg" alt="" /> <img id="gm2" class="gm" src="http://ekladata.com/1fBWwfSY8Pa8FPlRYEa_NGQ1dh0.jpg" alt="" /> <img id="gm3" class="gm" src="http://ekladata.com/1Ue3zFibYlgnIJ_fE0sK40oE_Qg.jpg" alt="" /> <img id="gm4" class="gm" src="http://ekladata.com/7EWatvw5PsGd570KHVxOvvsxzxQ.jpg" alt="" /> <img id="gm5" class="gm" src="http://ekladata.com/jO7x7GKJd-WE8AT30tirnmZQ5e4.jpg" alt="" /> <img id="gm6" class="gm" src="http://ekladata.com/4a8Xm3vZ72rCfReIyftUhl0_ebA.jpg" alt="" /> <img id="gm7" class="gm" src="http://ekladata.com/-u6y_elnmRDrxxtfr9kp33zMOk0.jpg" alt="" /> <img id="gm8" class="gm" src="http://ekladata.com/lJA6uq_IEkc89QrFDWEptqnnYY8.jpg" alt="" />
    <p id="ccd">Survol et clic.</p>
    </div>

    <style><!--
    #ccd{position:absolute, z-index:1; width:30vw; margin:1vh auto; text-align:center; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black;}
    .bzk{position:absolute; z-index:5; width:5vw; height:15vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transition:all 1s linear;}
    #bzk1{background:url('http://ekladata.com/AmI5V603DLtSa-wCika7n7sFQUk@1152x648.jpg'); background-size:60vw 33.75vw; transform:translate(3vw,17vw); background-position:-3vw -17vw;}
    #bzk2{background:url('http://ekladata.com/1fBWwfSY8Pa8FPlRYEa_NGQ1dh0@1152x648.jpg'); background-size:60vw 33.75vw; transform:translate(10vw,7vw); background-position:-10vw -7vw;}
    #bzk3{background:url('http://ekladata.com/1Ue3zFibYlgnIJ_fE0sK40oE_Qg@1152x648.jpg'); background-size:60vw 33.75vw; transform:translate(17vw,17vw); background-position:-17vw -17vw;}
    #bzk4{background:url('http://ekladata.com/7EWatvw5PsGd570KHVxOvvsxzxQ@1152x648.jpg'); background-size:60vw 33.75vw; transform:translate(24vw,7vw); background-position:-24vw -7vw;}
    #bzk5{background:url('http://ekladata.com/jO7x7GKJd-WE8AT30tirnmZQ5e4@1152x648.jpg'); background-size:60vw 33.75vw; transform:translate(31vw,17vw); background-position:-31vw -17vw;}
    #bzk6{background:url('http://ekladata.com/4a8Xm3vZ72rCfReIyftUhl0_ebA@1152x648.jpg'); background-size:60vw 33.75vw; transform:translate(38vw,7vw); background-position:-38vw -7vw;}
    #bzk7{background:url('http://ekladata.com/-u6y_elnmRDrxxtfr9kp33zMOk0@1152x648.jpg'); background-size:60vw 33.75vw; transform:translate(45vw,17vw); background-position:-45vw -17vw;}
    #bzk8{background:url('http://ekladata.com/lJA6uq_IEkc89QrFDWEptqnnYY8@1152x648.jpg'); background-size:60vw 33.75vw; transform:translate(51vw,7vw); background-position:-51vw -7vw;}
    .gm{position:absolute; z-index:100; widht:0vw; height:0vw; left:50vw; transform:translate(0vw,15vw); transition:all 1s linear;}
    #bzk1:focus ~ #gm1,#bzk2:focus ~ #gm2,#bzk3:focus ~ #gm3,#bzk4:focus ~ #gm4,#bzk5:focus ~ #gm5,#bzk6:focus ~ #gm6,#bzk7:focus ~ #gm7,#bzk8:focus ~ #gm8{left:0; transform:translate(0vw,0vw); width:100vw; height:56.25vw;}
    #bzk1:hover,#bzk2:hover,#bzk3:hover,#bzk4:hover,#bzk5:hover,#bzk6:hover,#bzk7:hover,#bzk8:hover{z-index:10; border:none; width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    --></style>