• Jeudi

    Article publié en 80vw/92vh et ici, en 60vw/69vh.

    Survolez chaque bouton.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 69vh; border: 0.6vh ridge white; margin: 2vh auto; background: url('http://ekladata.com/hJp-n6BeS2_jm081dVKQNLWfSac.jpg'); background-size: 60vw 69vh; overflow: hidden;">
    <p id="mg1">Survolez chaque bouton.</p>
    <p id="aa1" class="aa">&nbsp;</p>
    <p id="aa2" class="aa">&nbsp;</p>
    <p id="aa3" class="aa">&nbsp;</p>
    <p id="aa4" class="aa">&nbsp;</p>
    <p id="aa5" class="aa">&nbsp;</p>
    <p id="aa6" class="aa">&nbsp;</p>
    <p id="bb1" class="bb">&nbsp;</p>
    <p id="bb2" class="bb">&nbsp;</p>
    <p id="bb3" class="bb">&nbsp;</p>
    <p id="bb4" class="bb">&nbsp;</p>
    <p id="bb5" class="bb">&nbsp;</p>
    <p id="bb6" class="bb">&nbsp;</p>
    <p id="cc1" class="cc">&nbsp;</p>
    <p id="cc2" class="cc">&nbsp;</p>
    <p id="cc3" class="cc">&nbsp;</p>
    <p id="cc4" class="cc">&nbsp;</p>
    <p id="cc5" class="cc">&nbsp;</p>
    <p id="cc6" class="cc">&nbsp;</p>
    </div>
    <style><!--
    #mg1{position:absolute; z-index:1; width:50vw; transform:translate(0vw,60vh); text-align:center; font-size:2vw; color:white; text-shadow:0.2vh 0.2vh black;}
    .aa{position:absolute; z-index:10;width:2vw; height:8vh;}
    #aa1{transform:translate(57.9vw,5vh);}
    #aa2{transform:translate(57.9vw,15vh);}
    #aa3{transform:translate(57.9vw,25vh);}
    #aa4{transform:translate(57.9vw,35vh);}
    #aa5{transform:translate(57.9vw,45vh);}
    #aa6{transform:translate(57.9vw,55vh);}
    .bb{position:absolute; z-index:2; width:2vw; height:8vh; border-radius:2vh 0 0 2vh; border:0.1vh solid black; background:#DEB887; box-shadow:inset 0.3vh 0.3vh 0.4vh black;}
    #bb1{transform:translate(57.9vw,5vh);}
    #bb2{transform:translate(57.9vw,15vh);}
    #bb3{transform:translate(57.9vw,25vh);}
    #bb4{transform:translate(57.9vw,35vh);}
    #bb5{transform:translate(57.9vw,45vh);}
    #bb6{transform:translate(57.9vw,55vh);}
    .cc{z-index:5; width:60vw; height:69vh; transition:all 1s linear;}
    #cc1{transform:translate(61vw,0vh); background:url('http://ekladata.com/d-941bD5whrUn7nuX13m1lKx95o.jpg'); background-size:60vw 69vh;}
    #cc2{transform:translate(61vw,-71vh); background:url('http://ekladata.com/IBLqu-tN87ji6RuVC8SN0N1eOp4.jpg'); background-size:60vw 69vh;}
    #cc3{transform:translate(61vw,-140vh); background:url('http://ekladata.com/vdUOuy8G-s3ja8E_EkXW2Zag7FU.jpg'); background-size:60vw 69vh;}
    #cc4{transform:translate(61vw,-210vh);background:url('http://ekladata.com/cGd5hntSNZKMYaqdY6MEyfTyUf4.jpg'); background-size:60vw 69vh;}
    #cc5{transform:translate(61vw,-280vh);background:url('http://ekladata.com/-DtNVRep_hWeU-2IRbKFWG4eHfs.jpg'); background-size:60vw 69vh;}
    #cc6{transform:translate(61vw,-350vh);background:url('http://ekladata.com/mQCgrEmLtyFwXtFP4PuVj8UMCeo.jpg'); background-size:60vw 69vh;}
    #aa1:hover ~ #cc1{transform:translate(0vw,0vh);}
    #aa2:hover ~ #cc2{transform:translate(0vw,-71vh);}
    #aa3:hover ~ #cc3{transform:translate(0vw,-140vh);}
    #aa4:hover ~ #cc4{transform:translate(0vw,-210vh);}
    #aa5:hover ~ #cc5{transform:translate(0vw,-280vh);}
    #aa6:hover ~ #cc6{transform:translate(0vw,-350vh);}
    --></style>