Exemple 92

 9 images au ratio 16/9. Survol de chaque case.

<div style="width: 1000px; height: 563px; margin: 5px auto; border: 1px solid black; text-align: left;">
<p id="air1" class="air">&nbsp;</p>
<p id="air2" class="air">&nbsp;</p>
<p id="air3" class="air">&nbsp;</p>
<p id="air4" class="air">&nbsp;</p>
<p id="air5" class="air">&nbsp;</p>
<p id="air6" class="air">&nbsp;</p>
<p id="air7" class="air">&nbsp;</p>
<p id="air8" class="air">&nbsp;</p>
<p id="air9" class="air">&nbsp;</p>
<p id="mg1" class="mg">&nbsp;</p>
<p id="mg2" class="mg">&nbsp;</p>
<p id="mg3" class="mg">&nbsp;</p>
<p id="mg4" class="mg">&nbsp;</p>
<p id="mg5" class="mg">&nbsp;</p>
<p id="mg6" class="mg">&nbsp;</p>
<p id="mg7" class="mg">&nbsp;</p>
<p id="mg8" class="mg">&nbsp;</p>
<p id="mg9" class="mg">&nbsp;</p>
</div>

<style><!--
.air{position:absolute; z-index:1; box-shadow:inset -10px -10px 15px white, inset 10px 10px 15px black; transition:all 1s linear;}
#air1{box-sizing:border-box; width:400px; height:187px; background:pink; transform:translate(0px,0px);}
#air2{box-sizing:border-box; width:400px; height:187px; background:red; transform:translate(600px,0px);}
#air3{box-sizing:border-box; width:200px; height:187px; background:yellow; transform:translate(0px,187px);}
#air4{box-sizing:border-box; width:200px; height:187px; background:aqua; transform:translate(800px,187px);}
#air5{box-sizing:border-box; width:200px; height:189px; background:blue; transform:translate(0px,374px);}
#air6{box-sizing:border-box; width:200px; height:376px; background:green; transform:translate(200px,187px);}
#air7{box-sizing:border-box; width:200px; height:563px; background:purple; transform:translate(400px,0px);}
#air8{box-sizing:border-box; width:200px; height:376px; background:coral; transform:translate(600px,187px);}
#air9{box-sizing:border-box; width:200px; height:189px; background:brown; transform:translate(800px,374px);}
.mg{position:absolute; z-index:5; background-size:1000px 563px; opacity:0; transition: opacity 1s linear 0s, transform 1s linear 1s, width 1s linear 1s, height 1s linear 1s, background 1s linear 1s;}
#mg1{width:400px; height:187px; background:url('http://ekladata.com/gpqyvWG-y3fqHOWuN6HOfQjvNmI.jpg'); background-position:0px 0px; transform:translate(0px,0px);}
#mg2{width:400px; height:187px; background:url('http://ekladata.com/gdH1L_tAmGJDqLfL78Hcx89N7B0.jpg'); background-position:-600px 0px; transform:translate(600px,0px);}
#mg3{width:200px; height:187px; background:url('http://ekladata.com/OUyuOd7blEthAEy_hnOfXxPh1lU.jpg'); background-position:0px -187px; transform:translate(0px,187px);}
#mg4{width:200px; height:187px; background:url('http://ekladata.com/UojrSrULcrlFEBShw4R1XhYFpes.jpg'); background-position:-800px -187px; transform:translate(800px,187px);}
#mg5{width:200px; height:189px; background:url('http://ekladata.com/RSPbPSgeNYKbd02h443a-0pJHRI.jpg'); background-position:0px -374px; transform:translate(0px,374px);}
#mg6{width:200px; height:376px; background:url('http://ekladata.com/JGznpGeUHMllZh7-ZJMrIDqd_k4.jpg'); background-position:-200px -187px; transform:translate(200px,187px);}
#mg7{width:200px; height:563px; background:url('http://ekladata.com/3bMJveUGedg6ofueGYj9DtlIrbY.jpg'); background-position:-400px 0px; transform:translate(400px,0px);}
#mg8{width:200px; height:376px; background:url('http://ekladata.com/BA8NjBF8vHIx0mSYetYCAEmprPs.jpg'); background-position:-600px -187px; transform:translate(600px,187px);}
#mg9{width:200px; height:189px; background:url('http://ekladata.com/wOFbtAB4Td0M3mmy0gzJdPxxmZs.jpg'); background-position:-800px -374px; transform:translate(800px,374px);}
#mg1:hover,#mg2:hover,#mg3:hover,#mg4:hover,#mg5:hover,#mg6:hover,#mg7:hover,#mg8:hover,#mg9:hover{width:1000px; height:563px;opacity:1; background-position:0px 0px; transform:translate(0px,0px);}
--></style>