• Art.08A.5.21

    Le même en ajoutant un passage du noir et blanc à la couleur.

    Survol de chaque vignette.

     

     

     

     


    <div style="width:750px; height:563px; margin:20px auto; text-align:left;">
    <p id="mar0">Survol de chaque vignette.</p>
    <p id="mar1" class="mar">&nbsp;</p>
    <p id="mar2" class="mar">&nbsp;</p>
    <p id="mar3" class="mar">&nbsp;</p>
    <p id="mar4" class="mar">&nbsp;</p>
    </div>
    <style><!--
    #mar0{position:absolute; z-index:1; width:750px; height:30px; line-height:30px; text-align:center; font-size:25px; transform:translate(0px,270px);}
    .mar{position:absolute; z-index:1; width:375px; height:250px; border:4px ridge white; filter:grayscale(1); transition:all 1s;}
    #mar1{box-sizing:border-box; background:url('http://ekladata.com/JaRhLPTdyAheOk4xfPFSo28O0YM.jpg'); background-size:750px 563px; background-position:0px 0px; transform:translate(0px,0px);}
    #mar2{box-sizing:border-box; background:url('http://ekladata.com/AkRjiCvPn6a8W0U5zsS59b7aZT8.jpg'); background-size:750px 563px; background-position:-375px 0px; transform:translate(375px,0px);}
    #mar3{box-sizing:border-box; background:url('http://ekladata.com/9sSM11sTeK-QI2BK6ke7sk3CmVU.jpg'); background-size:750px 563px; background-position:0px -313px; transform:translate(0px,313px);}
    #mar4{box-sizing:border-box; background:url('http://ekladata.com/KD6s9QLlmeT4XBnCaFYqSAIQI4o.jpg'); background-size:750px 563px; background-position:-375px -313px; transform:translate(375px,313px);}
    #mar1:hover,#mar2:hover,#mar3:hover,#mar4:hover{z-index:5; width:750px; height:563px; background-position:0px 0px; transform:translate(0px,0px); filter:grayscale(0);}
    --></style>