Flex3

 En revenant sur une de mes pages sur l'attribut "flex", qui permet d'agrandir un élément en faisant réduire les autres, je me suis aperçu que mon exemple était en unités adaptatives viewport, ce qui n'est pas le plus simple !

Le revoici en pixels, en vertical et dans un montage de 1200px par 800px avec 5 images en 1200x675px (16/9).

Vous remarquerez que le montage est plus haut que chacune des images afin d'en afficher une entièrement avec les autres réduites.

 Commande au 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:800px; 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('https://ekladata.com/u07-HCZYEZJEW_yYP6fJWEyUJbc.jpg'); background-size:1200px 675px; }
#chb {box-sizing:border-box; background:url('https://ekladata.com/4x5oVj5B3zAqgpsGOV5SIT9P-U8.jpg'); background-size:1200px 675px; }
#chc {box-sizing:border-box; background:url('https://ekladata.com/SvU8dnV0u2wrd7_6pFAhXVpDHkw.jpg'); background-size:1200px 675px; }
#chd {box-sizing:border-box; background:url('https://ekladata.com/duJl9zSfq9T89hYM56OsB6eM1W4.jpg'); background-size:1200px 675px; }
#che {box-sizing:border-box; background:url('https://ekladata.com/GcG4eRiX2PrWSl5aR6CyeGCm1eg.jpg'); background-size:1200px 675px; }
#cha:hover,#chb:hover,#chc:hover,#chd:hover,#che:hover{flex:100;}
--></style>