Art.07.5.21

Modification d'un code déjà publié. 6 images au ratio 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 agrandir/Clic maintenu pour modifier la couleur.</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:800px; font-size:20px; transform:translate(100px,10px);}
.rg{position:absolute; z-index:1; width:80px; height:250px; border:4px solid white; border-radius:40px;  transition:all 1s, filter 6s;}
#rag1{box-sizing:border-box; background:url('http://ekladata.com/LPjU5IHHkoxUwv-XdY-gHRFSuLw.jpg'); background-size:1000px 562px; background-position:-130px -100px; transform:translate(130px,100px);}
#rag2{box-sizing:border-box; background:url('http://ekladata.com/G6kQ1VysbE_WgjcCciBO4LSPLl0.jpg'); background-size:1000px 562px; background-position:-260px -250px; transform:translate(260px,250px);}
#rag3{box-sizing:border-box; background:url('http://ekladata.com/xEkIR7bjYBqPgp8oOTbob-fXvsc.jpg'); background-size:1000px 562px; background-position:-390px -100px; transform:translate(390px,100px);}
#rag4{box-sizing:border-box; background:url('http://ekladata.com/5qh7zoHcd6tUpi4mXOt7a0wW0qQ.jpg'); background-size:1000px 562px; background-position:-520px -250px; transform:translate(520px,250px);}
#rag5{box-sizing:border-box; background:url('http://ekladata.com/-MPbdOlr0mIkTVGybTBAN1K8ZpE.jpg'); background-size:1000px 562px; background-position:-650px -100px; transform:translate(650px,100px);}
#rag6{box-sizing:border-box; background:url('http://ekladata.com/6ejdPpTcKgNum7BVixgdBcxG95g.jpg'); background-size:1000px 562px; background-position:-780px -250px; transform:translate(780px,250px);}

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