• Art.10A.5.21

    8 images verticales 16/9 et une centrale au format batard...

    C L I C
    M A I N T E N U.

     

     

     

     

     

     

     

     

     

    <div style="width: 686px; height: 864px; border: 1px solid black; margin: 20px auto; text-align: left; background: linear-gradient(to bottom, #e4efc0 0%,#abbd73 100%);">
    <p id="plus0">C L I C<br />M A I N T E N U.</p>
    <p id="plus1" class="plus">&nbsp;</p>
    <p id="plus2" class="plus">&nbsp;</p>
    <p id="plus3" class="plus">&nbsp;</p>
    <p id="plus4" class="plus">&nbsp;</p>
    <p id="plus5" class="plus">&nbsp;</p>
    <p id="plus6" class="plus">&nbsp;</p>
    <p id="plus7" class="plus">&nbsp;</p>
    <p id="plus8" class="plus">&nbsp;</p>
    <p id="plus9" class="plus">&nbsp;</p>
    </div>
    <style><!--
    #plus0{position:absolute; z-index:1; width:400px; height:200px; text-align:center; font-size:30px; transform:translate(120px,50px);}
    .plus{position:absolute; z-index:1; width:80px; height:142px; border:4px solid white; transition:all 1s;}
    #plus1{box-sizing:border-box; background:url('http://ekladata.com/dO85BXSEF70KKeR6dwOjT6kDffQ.jpg'); background-size:cover; transform:translate(10px,50px);}
    #plus2{box-sizing:border-box; background:url('http://ekladata.com/yX4QO8Snpy3Jm8pT_GGzJ2z5MT8.jpg'); background-size:cover; transform:translate(10px,250px);}
    #plus3{box-sizing:border-box; background:url('http://ekladata.com/pyvICzLqNlewWamHDltJoKCb-XU.jpg'); background-size:cover; transform:translate(10px,450px);}
    #plus4{box-sizing:border-box; background:url('http://ekladata.com/mBoCCn9CWVAMTB53ZexHkFludzE.jpg'); background-size:cover; transform:translate(10px,650px);}
    #plus5{box-sizing:border-box; background:url('http://ekladata.com/s-P3Sp0gu-cxNI2iLN4gImWGVmY.jpg'); background-size:cover; transform:translate(596px,50px);}
    #plus6{box-sizing:border-box; background:url('http://ekladata.com/u5qzEYJPe_6ACFoE01SfsnZLx3w.jpg'); background-size:cover; transform:translate(596px,250px);}
    #plus7{box-sizing:border-box; background:url('http://ekladata.com/Uy91WP1FbHaeVwcKmJXKMISZiuc.jpg'); background-size:cover; transform:translate(596px,450px);}
    #plus8{box-sizing:border-box; background:url('http://ekladata.com/tWV0Ghzdyo8svX93ikmyQBfi2YU.jpg'); background-size:cover; transform:translate(596px,650px);}
    #plus9{box-sizing:border-box; width:400px; height:600px; background:url('http://ekladata.com/UmgII_Cw_SMEKA5YI0o69FdvVpY.jpg'); background-size:cover; transform:translate(145px,200px);}
    #plus1:active,#plus2:active,#plus3:active,#plus4:active,#plus5:active,#plus6:active,#plus7:active,#plus8:active{z-index:5; width:486px; height:864px; transform:translate(100px,0px);}
    #plus9:active{z-index:5; width:686px; height:864px; transform:translate(0px,0px);}
    --></style>