Art.16C.5.21

Un code simple pour 8 images au ratio 16/9.

Survol pour agrandir et clic maintenu pour colorer.
Photos de l'hôtel Bakoua en Martinique; un jeu télévisé offrait au vainqueur, un séjour dans cet hôtel.

<div style="width: 1000px; height: 562px; border: 2px solid green; margin: 20px auto; background: rgba(150,200,150,1); text-align: left;">
<p id="hgf0">Survol pour agrandir et clic maintenu pour colorer.<br />Photos de l'h&ocirc;tel Bakoua en Martinique; un jeu t&eacute;l&eacute;vis&eacute; offrait au vainqueur, un s&eacute;jour dans cet h&ocirc;tel.</p>
<img id="hgf1" class="hgf" src="http://ekladata.com/IVoM0b7d1w7bdMdqfttYJtg8dAs.jpg" alt="" /> <img id="hgf2" class="hgf" src="http://ekladata.com/JdBemCZqU6iQR-P_lyv3yOrAPRg.jpg" alt="" /> <img id="hgf3" class="hgf" src="http://ekladata.com/bqKsEmhDaSIXhvb1tzZqubjrRiE.jpg" alt="" /> <img id="hgf4" class="hgf" src="http://ekladata.com/ZAZezU-h9acq_sW1kzl04ZHhJsM.jpg" alt="" /> <img id="hgf5" class="hgf" src="http://ekladata.com/BGE4pL7Cc6eWCCAnN9K-Uq9muxA.jpg" alt="" /> <img id="hgf6" class="hgf" src="http://ekladata.com/fnyJtM41SORKXQmq1dWi5bU8wjg.jpg" alt="" /> <img id="hgf7" class="hgf" src="http://ekladata.com/-9966Zmgf8-HE-e9owLH5kkA3Cw.jpg" alt="" /> <img id="hgf8" class="hgf" src="http://ekladata.com/XkD8DjzpS3-BXBxVEAh6N8Pnw30.jpg" alt="" /></div>

<style><!--
#hgf0{position:absolute; z-index:1; width:1000px; text-align:center; transform:translate(0px,10px); font-size:20px;}
.hgf{position:absolute; z-index:1; width:240px; height:135px; border:4px ridge white; border-radius:50px; filter:grayscale(1); transition:all 1s;}
#hgf1{box-sizing:border-box; transform:translate(8px,200px);}
#hgf2{box-sizing:border-box; transform:translate(256px,200px);}
#hgf3{box-sizing:border-box; transform:translate(504px,200px);}
#hgf4{box-sizing:border-box; transform:translate(752px,200px);}
#hgf5{box-sizing:border-box; transform:translate(8px,380px);}
#hgf6{box-sizing:border-box; transform:translate(256px,380px);}
#hgf7{box-sizing:border-box; transform:translate(504px,380px);}
#hgf8{box-sizing:border-box; transform:translate(752px,380px);}
#hgf1:hover,#hgf2:hover,#hgf3:hover,#hgf4:hover,#hgf5:hover,#hgf6:hover,#hgf7:hover,#hgf8:hover{z-index:5; width:1000px; height:562px; border-radius:0%; transform:translate(0px,0px);}
#hgf1:active,#hgf2:active,#hgf3:active,#hgf4:active,#hgf5:active,#hgf6:active,#hgf7:active,#hgf8:active{filter:grayscale(0);}
--></style>