Monique

1+6 images au ratio 16/9. Montage en 800x450px.

Survol

<div style="width: 800px; height: 450px; margin: 30px auto; border: 2px solid white; text-align: left; background: url('https://ekladata.com/8K3CZPaxPSAhZj59ZpSwY1Y-do0.jpg'); background-size: cover;">
<p id="mon0">Survol</p>
<img id="mon1" class="mon" src="https://ekladata.com/UMUfG0sNwqpkPiFQmI5WBAVw8Bo.jpg" alt="" /> <img id="mon2" class="mon" src="https://ekladata.com/tzhz5Bq08zSgswzoaKMAUVnhC04.jpg" alt="" /> <img id="mon3" class="mon" src="https://ekladata.com/aXYKYcywhthdoB7necQSyLH65XE.jpg" alt="" /> <img id="mon4" class="mon" src="https://ekladata.com/POVoS96HsI_GuZIMfY2HIqhwthk.jpg" alt="" /> <img id="mon5" class="mon" src="https://ekladata.com/WKkQx-7_EvSLxsAZrKc78B2u-FI.jpg" alt="" /> <img id="mon6" class="mon" src="https://ekladata.com/jm6_eL66PCHK3C3pUa24sL68aPA.jpg" alt="" /></div>
<style><!--
#mon0{position:absolute; z-index:1; width:120px; font-size:25px; color:white; text-shadow:1px 1px black; transform:translate(50px,20px);}
.mon{position:absolute; z-index:1; width:160px; height:90px; border:3px solid white; filter:grayscale(1); transition:all 1s, filter 1s 1s;}
#mon1{box-sizing:border-box; transform:translate(20px,80px);}
#mon2{box-sizing:border-box; transform:translate(20px,180px);}
#mon3{box-sizing:border-box; transform:translate(20px,280px);}
#mon4{box-sizing:border-box; transform:translate(620px,80px);}
#mon5{box-sizing:border-box; transform:translate(620px,180px);}
#mon6{box-sizing:border-box; transform:translate(620px,280px);}
#mon1:hover,#mon2:hover,#mon3:hover,#mon4:hover,#mon5:hover,#mon6:hover{z-index:5; width:800px; height:450px; filter:grayscale(0); transform:translate(0px,0px);}
--></style>