flex3

La hauteur du montage (1200x900px) est supérieure à celle de chaque image (1200x675px) pour s'afficher entièrement avec les autres réduites.

Survol

 

 

 

 

 

---

<div id="fx1">

<p id="cha" class="fx">&nbsp;</p>

<p id="chb" class="fx">&nbsp;</p>

<p id="chc" class="fx">&nbsp;</p>

<p id="chd" class="fx">&nbsp;</p>

<p id="che" class="fx">&nbsp;</p>

</div>

<style><!--

#fx1{display:flex; width:1200px; height:900px; margin:50px auto; flex-direction:column;}

.fx{width:1200px; border:4px ridge grey; flex:1; transition:all 2s;} 

#cha {box-sizing:border-box; background:url('http://ekladata.com/u07-HCZYEZJEW_yYP6fJWEyUJbc.jpg'); background-size:1200px 675px; }

#chb {box-sizing:border-box; background:url('http://ekladata.com/4x5oVj5B3zAqgpsGOV5SIT9P-U8.jpg'); background-size:1200px 675px; }

#chc {box-sizing:border-box; background:url('http://ekladata.com/SvU8dnV0u2wrd7_6pFAhXVpDHkw.jpg'); background-size:1200px 675px; }

#chd {box-sizing:border-box; background:url('http://ekladata.com/duJl9zSfq9T89hYM56OsB6eM1W4.jpg'); background-size:1200px 675px; }

#che {box-sizing:border-box; background:url('http://ekladata.com/GcG4eRiX2PrWSl5aR6CyeGCm1eg.jpg'); background-size:1200px 675px; }

#cha:hover,#chb:hover,#chc:hover,#chd:hover,#che:hover{flex:100;}

--></style>