Exemple 171

Une variante du code précédent avec le passage du noir et blanc à la couleur.

<div style="width: 1100px; height: 619px; margin: 2px auto; border: 2px solid black; background: linear-gradient(to top, #a7c7dc 0%,#85b2d3 100%);">
<p id="red0">Survol</p>
<p id="red1" class="red">&nbsp;</p>
<p id="red2" class="red">&nbsp;</p>
<p id="red3" class="red">&nbsp;</p>
<p id="red4" class="red">&nbsp;</p>
<p id="red5" class="red">&nbsp;</p>
<p id="red6" class="red">&nbsp;</p>
<p id="red7" class="red">&nbsp;</p>
<p id="red8" class="red">&nbsp;</p>
</div>

<style><!--
#red0{position:absolute; z-index:1; width:150px; font-size:40px; color:white; text-shadow:2px 2px black; transform:translate(470px,280px);}
.red{position:absolute; z-index:1; width:320px; height:180px; border:5px solid white; box-shadow:6px 6px 10px black; filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, filter 1s linear 1s;}
#red1{background:url('http://ekladata.com/_NkiEfGFllRgHEKaYU4H4mXCdd4@1100x619.jpg'); background-size:cover; transform:translate(10px,10px);}
#red2{background:url('http://ekladata.com/_fpdMqL-q1R8n7crURav79HGl1o@1100x619.jpg'); background-size:cover; transform:translate(760px,10px);}
#red3{background:url('http://ekladata.com/tWa8t29bBq_IelPwir2ZEnFQZZI@1100x619.jpg'); background-size:cover; transform:translate(10px,420px);}
#red4{background:url('http://ekladata.com/1Eh3DRTMggpf2NWRZiqPyYKcwHU@1100x619.jpg'); background-size:cover; transform:translate(760px,420px);}
#red5{background:url('http://ekladata.com/v8Ow_QqJyVehdG5fZNhoP3celMY@1100x619.jpg'); background-size:cover; transform:translate(190px,70px) rotate(-20deg);}
#red6{background:url('http://ekladata.com/JS3sytDL3n7bRNtLUWfyFu1Vgzs@1100x619.jpg'); background-size:cover; transform:translate(570px,70px) rotate(20deg);}
#red7{background:url('http://ekladata.com/9Y5aR3xPHnv1_x-sv4DWp3GeDlk@1100x619.jpg'); background-size:cover; transform:translate(190px,360px) rotate(20deg);}
#red8{background:url('http://ekladata.com/j_Xl6mjE9h1-8ljNjWNMhsehsNM@1100x619.jpg'); background-size:cover; transform:translate(570px,360px) rotate(-20deg);}
#red1:hover,#red2:hover,#red3:hover,#red4:hover,#red5:hover,#red6:hover,#red7:hover,#red8:hover{z-index:5; box-sizing:border-box; width:1100px; height:619px; box-shadow:none; filter:grayscale(0); transform:translate(0px,0px);}
--></style>