• Plein Ecran 19

    ...


    <div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; border-radius: 3vw; box-shadow: inset -0.4vh -0.4vh 0.8vh black, inset 0.4vh 0.4vh 0.8vh black; background: url('http://ekladata.com/qshiibFLRvr7Gd4I2EVIFxwoBTo@1152x648.jpg'); background-size: 60vw 33.75vw; margin: 1vh auto; text-align: left;">
    <input id="sor1" class="sor" type="text" />
    <input id="sor2" class="sor" type="text" />
    <input id="sor3" class="sor" type="text" />
    <input id="sor4" class="sor" type="text" />
    <input id="sor5" class="sor" type="text" />
    <input id="sor6" class="sor" type="text" />
    <input id="sor7" class="sor" type="text" />
    <input id="sor8" class="sor" type="text" />
    <img id="deh1" class="deh" src="http://ekladata.com/qOBWOtr13SrZPcCGQ5ruqf1PM2s.jpg" alt="" />
    <img id="deh2" class="deh" src="http://ekladata.com/Xmo5hcHWa72-ZmGelyeT0llXH2Y.jpg" alt="" />
    <img id="deh3" class="deh" src="http://ekladata.com/279klwLyOCVX6w3GF6kYOa2Vh-Q.jpg" alt="" />
    <img id="deh4" class="deh" src="http://ekladata.com/70krM9UGfpfzurAc38L26THcaSw.jpg" alt="" />
    <img id="deh5" class="deh" src="http://ekladata.com/y-HGFRM4Cy5b-j3-SqGNZ7FBPTc.jpg" alt="" />
    <img id="deh6" class="deh" src="http://ekladata.com/PowQM2o8erPo_ffTE5wB7KSK5P8.jpg" alt="" />
    <img id="deh7" class="deh" src="http://ekladata.com/rYz0nmJk0WM-FcaYyC4yXycY24M.jpg" alt="" />
    <img id="deh8" class="deh" src="http://ekladata.com/jK1jBk__mj9dgcW6P_g0h9WxIls.jpg" alt="" />
    </div>
    <style><!--
    .sor{position:absolute; z-index:1; width:8vw; height:4.5vw; border-radius:50%; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transform-origin:center center;transition:all 0.5s linear;}
    #sor1{transform:translate(2vw,0.3vw) rotatex(55deg); background:url('http://ekladata.com/qOBWOtr13SrZPcCGQ5ruqf1PM2s@154x86.jpg'); background-size:cover; background-position:50% 50%;}
    #sor2{transform:translate(2vw,4.3vw) rotatex(55deg); background:url('http://ekladata.com/Xmo5hcHWa72-ZmGelyeT0llXH2Y@154x86.jpg'); background-size:cover; background-position:50% 50%;}
    #sor3{transform:translate(2vw,8.3vw) rotatex(55deg); background:url('http://ekladata.com/279klwLyOCVX6w3GF6kYOa2Vh-Q@154x86.jpg'); background-size:cover; background-position:50% 50%;}
    #sor4{transform:translate(2vw,12.3vw) rotatex(55deg); background:url('http://ekladata.com/70krM9UGfpfzurAc38L26THcaSw@154x86.jpg'); background-size:cover; background-position:50% 50%;}
    #sor5{transform:translate(2vw,16.3vw) rotatex(55deg); background:url('http://ekladata.com/y-HGFRM4Cy5b-j3-SqGNZ7FBPTc@154x86.jpg'); background-size:cover; background-position:50% 50%;}
    #sor6{transform:translate(2vw,20.3vw) rotatex(55deg); background:url('http://ekladata.com/PowQM2o8erPo_ffTE5wB7KSK5P8@154x86.jpg'); background-size:cover; background-position:50% 50%;}
    #sor7{transform:translate(2vw,24.3vw) rotatex(55deg); background:url('http://ekladata.com/rYz0nmJk0WM-FcaYyC4yXycY24M@154x86.jpg'); background-size:cover; background-position:50% 50%;}
    #sor8{transform:translate(2vw,28.3vw) rotatex(55deg); background:url('http://ekladata.com/jK1jBk__mj9dgcW6P_g0h9WxIls@154x86.jpg'); background-size:cover; background-position:50% 50%;}
    #sor1:hover{z-index:5;transform:translate(2vw,0.3vw) rotatey(0deg);}
    #sor2:hover{z-index:5;transform:translate(2vw,4.3vw) rotatey(0deg);}
    #sor3:hover{z-index:5;transform:translate(2vw,8.3vw) rotatey(0deg);}
    #sor4:hover{z-index:5;transform:translate(2vw,12.3vw) rotatey(0deg);}
    #sor5:hover{z-index:5;transform:translate(2vw,16.3vw) rotatey(0deg);}
    #sor6:hover{z-index:5;transform:translate(2vw,20.3vw) rotatey(0deg);}
    #sor7:hover{z-index:5;transform:translate(2vw,24.3vw) rotatey(0deg);}
    #sor8:hover{z-index:5;transform:translate(2vw,28.3vw) rotatey(0deg);}
    .deh{position:absolute; z-index:100; width:100vw; height:0vw; left:0; transition:all 1s linear;}
    #sor1:focus ~ #deh1,#sor2:focus ~ #deh2,#sor3:focus ~ #deh3,#sor4:focus ~ #deh4,#sor5:focus ~ #deh5,#sor6:focus ~ #deh6,#sor7:focus ~ #deh7,#sor8:focus ~ #deh8{height:56.25vw;}
    --></style>