Flex

Je suis revenu sur un code que je n'ai que peu utilisé mais qui présente des avantages: Flex.

Survolez chaque vignette: il suffit de déplacer votre curseur sur chaque vignette pour l'agrandir.

<div style="width: 1000px; height: 563px; margin: 5px auto; display: flex;">

<p id="fl1" class="fl">&nbsp;</p>

<p id="fl2" class="fl">&nbsp;</p>

<p id="fl3" class="fl">&nbsp;</p>

<p id="fl4" class="fl">&nbsp;</p>

<p id="fl5" class="fl">&nbsp;</p>

</div>

<style><!--

.fl{height:112.5px; border:4px ridge white; flex:0.5; transition:all 1s linear;}

#fl1{box-sizing:border-box; background:url('https://ekladata.com/2TLG0J5D4G6oopBVw8N7kZw1lPk.jpg'); background-size:cover;}

#fl2{box-sizing:border-box; background:url('https://ekladata.com/C_AmPl6hyUfnpB955YcxHR9gh3U.jpg'); background-size:cover;}

#fl3{box-sizing:border-box; background:url('https://ekladata.com/nf6UzzIsVpc-n71owvWbvgrBtos.jpg'); background-size:cover;}

#fl4{box-sizing:border-box; background:url('https://ekladata.com/NvnflQR22IfjO6WB_QiOxIXZuJk.jpg'); background-size:cover;}

#fl5{box-sizing:border-box; background:url('https://ekladata.com/gK9dRYklJeQZzxqxoV7J5kJF1AA.jpg'); background-size:cover;}

#fl1:hover,#fl2:hover,#fl3:hover,#fl4:hover,#fl5:hover{z-index:1; flex:8; height:450px;}

--></style>

Les images sont au ratio 16/9: 800x450px.

Chaque vignette occupe le même % du montage: flex:0.5; et l'ensemble occupe la totalité de la largeur du cadre.

Au survol, la vignette occupe 80% de la largeur du montage (flex:8;) et les 4 autres 20% (flex:0.5; x 4).

Ce code à l'avantage de s'adapter aux dimensions que vous souhaitez, simplement en modifiant les dimensions du cadre et les hauteurs (vignette + vignette survolée).