-
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"> </p>
<p id="mar2" class="mar"> </p>
<p id="mar3" class="mar"> </p>
<p id="mar4" class="mar"> </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>