Montage 289

8 images au ratio 16/9.

Survol

<div style="width:900px; height:504px; margin:5px auto; text-align:left; border:2px ridge white;">
<img id="fr1" class="fr" src="http://ekladata.com/Jw6VmJzbSfV9UfXK_U_TlmPKO8Q.jpg">
<img id="fr2" class="fr" src="http://ekladata.com/xrUrUFQpAGKyt0f8q3NzAVy-ggw.jpg">
<img id="fr3" class="fr" src="http://ekladata.com/Hp3JoPEqwMbPzuHpzwKKgf8npfc.jpg">
<img id="fr4" class="fr" src="http://ekladata.com/eTAyM0ZexmGtMdsXXWlQVGuuIyQ.jpg">
<img id="fr5" class="fr" src="http://ekladata.com/_IHlIRZ_AV4TsX5sa4MFYri8q3E.jpg">
<img id="fr6" class="fr" src="http://ekladata.com/LRqsQOU0rcoSoC_jP0GfLaiXbog.jpg">
<img id="fr7" class="fr" src="http://ekladata.com/9WOhtQiaj6_iMR5RKwbyFP3fWZg.jpg">
<img id="fr8" class="fr" src="http://ekladata.com/xtSGShvUDnQ4VvET9P8OyYx-gEY.jpg">
<p id="fr9">Survol</p>
</div>
<style><!--
.fr{position:absolute; z-index:1; width:300px; height:168px; border:4px ridge white; transition:all 1s linear;}
#fr1{box-sizing:border-box; transform:translate(0px,0px);}
#fr2{box-sizing:border-box; transform:translate(300px,0px);}
#fr3{box-sizing:border-box; transform:translate(600px,0px);}
#fr4{box-sizing:border-box; transform:translate(600px,168px);}
#fr5{box-sizing:border-box; transform:translate(600px,336px);}
#fr6{box-sizing:border-box; transform:translate(300px,336px);}
#fr7{box-sizing:border-box; transform:translate(0px,336px);}
#fr8{box-sizing:border-box; transform:translate(0px,168px);}
#fr9{position:absolute; z-index:1; width:300px; height:168px; transform:translate(300px,168px); font-size:30px; text-align:center; line-height:168px;}
#fr1:hover,#fr2:hover,#fr3:hover,#fr4:hover,#fr5:hover,#fr6:hover,#fr7:hover,#fr8:hover{z-index:5; width:900px; height:504px; transform:translate(0px,0px);}
--></style>