Art.05A.5.21

Même code avec des images horizontales, 16/9.

<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; border: 1px solid black; background: linear-gradient(to bottom, #d5cea6 0%,#c9c190 40%,#b7ad70 100%);">
<p id="rag0">Survol pour colorer/Clic maintenu pour agrandir.</p>
<p id="rag1" class="rg">&nbsp;</p>
<p id="rag2" class="rg">&nbsp;</p>
<p id="rag3" class="rg">&nbsp;</p>
<p id="rag4" class="rg">&nbsp;</p>
<p id="rag5" class="rg">&nbsp;</p>
<p id="rag6" class="rg">&nbsp;</p>
</div>

<style><!--
#rag0{position:absolute; z-index:1; width:600px; font-size:20px; transform:translate(200px,10px);}
.rg{position:absolute; z-index:1; width:250px; height:250px; border:4px solid white; border-radius:50%; filter:grayscale(1); transition:all 1s, filter 0s;}
#rag1{box-sizing:border-box; background:url('http://ekladata.com/Kvq1sOf0TDdg-Cx53-qcPCZHqCc.jpg'); background-size:1000px 562px; background-position:-50px -100px; transform:translate(50px,100px);}
#rag2{box-sizing:border-box; background:url('http://ekladata.com/vvlaf7pMZVspVUMC5eIZCRyfFO8.jpg'); background-size:1000px 562px; background-position:-180px -250px; transform:translate(180px,250px);}
#rag3{box-sizing:border-box; background:url('http://ekladata.com/u-BWYO9tsqLe5LqX-8vtcaT6yVw.jpg'); background-size:1000px 562px; background-position:-310px -100px; transform:translate(310px,100px);}
#rag4{box-sizing:border-box; background:url('http://ekladata.com/Jb4yG4xqn1yUeM2N3dKYOLpmXK0.jpg'); background-size:1000px 562px; background-position:-440px -250px; transform:translate(440px,250px);}
#rag5{box-sizing:border-box; background:url('http://ekladata.com/jCtYLS8ug7HwXJnjMzHkXaDntAQ.jpg'); background-size:1000px 562px; background-position:-570px -100px; transform:translate(570px,100px);}
#rag6{box-sizing:border-box; background:url('http://ekladata.com/IWfJfslEV03fhFQrTS4OGrDwgng.jpg'); background-size:1000px 562px; background-position:-700px -250px; transform:translate(700px,250px);}

#rag1:hover,#rag2:hover,#rag3:hover,#rag4:hover,#rag5:hover,#rag6:hover{filter:grayscale(0);}
#rag1:active,#rag2:active,#rag3:active,#rag4:active,#rag5:active,#rag6:active{z-index:5; width:1000px; height:562px; border-radius:0%; background-position:0% 0%; transform:translate(0px,0px);}
--></style>