Montage 12

Une présentation proche du montage précédent .

<div style="width: 60vw; height: 33.75vw; border: 0.2vh solid black; margin: 1vh auto; background: radial-gradient(ellipse at center, #d5cea6 0%,#aa8f7b 49%,#d5cea6 100%);">
<p id="fon1" class="fon">&nbsp;</p>
<p id="fon2" class="fon">&nbsp;</p>
<p id="fon3" class="fon">&nbsp;</p>
<p id="fon4" class="fon">&nbsp;</p>
<p id="fon5" class="fon">&nbsp;</p>
<p id="fon6" class="fon">&nbsp;</p>
<p id="fon7" class="fon">&nbsp;</p>
<p id="fon8" class="fon">&nbsp;</p>
<p id="fon0">&nbsp;</p>
<p id="ex"><span style="background-color: #00ff00;">Le survol d'une vignette</span> agrandit l'image en noir et blanc et <span style="background-color: #00ffff;">le clic maintenu</span> lui donne de la couleur.</p>
</div>
<hr style="border:0.3vh dotted black; font-size:2vw;">
...
<style><!--
.fon{position:absolute; z-index:1; width:9vw; height:9vw; border:0.2vw solid white; border-radius:50%; box-shadow:0.4vh 0.4vh 0.6vh black; transition:all 1s linear;}
#fon1{box-sizing:border-box; background:url('http://ekladata.com/MmMiw4aLSh91G-NHs1Y6aM6Dlz4.jpg'); background-size:cover; transform:translate(1vw,1vw); -webkit-filter:grayscale(1);filter:grayscale(1);}
#fon2{box-sizing:border-box; background:url('http://ekladata.com/slPq8nOPsiBTvAQwAOiJ-srokqo.jpg'); background-size:cover; transform:translate(1vw,8vw); -webkit-filter:grayscale(1);filter:grayscale(1);}
#fon3{box-sizing:border-box; background:url('http://ekladata.com/0R_oXML6EXWDveB9_IOv3p3joLc.jpg'); background-size:cover; transform:translate(1vw,15vw); -webkit-filter:grayscale(1);filter:grayscale(1);}
#fon4{box-sizing:border-box; background:url('http://ekladata.com/BOWtK3UTTnVnEoLe7_-JczOWTNM.jpg'); background-size:cover; transform:translate(1vw,22vw); -webkit-filter:grayscale(1);filter:grayscale(1);}
#fon5{box-sizing:border-box; background:url('http://ekladata.com/0VQg_upLt0-yWuaXPZBzjoGQ2hI.jpg'); background-size:cover; transform:translate(49vw,1vw); -webkit-filter:grayscale(1);filter:grayscale(1);}
#fon6{box-sizing:border-box; background:url('http://ekladata.com/78h3eg8lgxhAnjTH4UR8BVB_REI.jpg'); background-size:cover; transform:translate(49vw,8vw); -webkit-filter:grayscale(1);filter:grayscale(1);}
#fon7{box-sizing:border-box; background:url('http://ekladata.com/lXU8gq4FKiqGd8grbGPKHySLDSY.jpg'); background-size:cover; transform:translate(49vw,15vw); -webkit-filter:grayscale(1);filter:grayscale(1);}
#fon8{box-sizing:border-box; background:url('http://ekladata.com/yo5kPMkz2RfwSIA8dB9d_beLNJw.jpg'); background-size:cover; transform:translate(49vw,22vw); -webkit-filter:grayscale(1);filter:grayscale(1);}

#ex{position:absolute; z-index:1; width:35vw;transform:translate(12vw,10vw); text-align:center; font-size:1vw;}

#fon1:hover,#fon2:hover,#fon3:hover,#fon4:hover,#fon5:hover,#fon6:hover,#fon7:hover,#fon8:hover{ z-index:5;transform:translate(0vw,0vw); width:60vw; height:33.75vw; border:none; border-radius:0%;}

#fon1:active,#fon2:active,#fon3:active,#fon4:active,#fon5:active,#fon6:active,#fon7:active,#fon8:active{-webkit-filter:grayscale(0);filter:grayscale(0);}
--></style>