Montage 217

Préparant un montage avec variante, je reviens sur un sujet que vous connaissez et traité sur de nombreux sites (ici, par exemple): les arrondis sur les cadres ou images.

A partir d'un même montage, nous pouvons donc l'adapter à la présentation que nous voulons.

Prenons un premier exemple avec 5 images au ratio 16/9, sans arrondi, à survoler.

<div style="width: 1000px; height: 563px; margin: 5px auto;">
<p id="bord1" class="bord">&nbsp;</p>
<p id="bord2" class="bord">&nbsp;</p>
<p id="bord3" class="bord">&nbsp;</p>
<p id="bord4" class="bord">&nbsp;</p>
<p id="bord5" class="bord">&nbsp;</p>
</div>

<style><!--
.bord{position:absolute; z-index:1; width:400px; height:225px; border:4px ridge white; transition:all 1s linear;}
#bord1{box-sizing:border-box; background:url('http://ekladata.com/ptUqFlWKP95ahqu_EwNi8B0FfWI@1000x563.jpg'); background-size:cover; transform:translate(0px,0px);}
#bord2{box-sizing:border-box; background:url('http://ekladata.com/-uAEu35cQBraOtpT7vApeQT9M8w@1000x563.jpg'); background-size:cover; transform:translate(600px,0px);}
#bord3{box-sizing:border-box; background:url('http://ekladata.com/d62qZJngD62SfpTZe3XAR9F5YH4@1000x563.jpg'); background-size:cover; transform:translate(600px,338px);}
#bord4{box-sizing:border-box; background:url('http://ekladata.com/SbW0u0NOx0uzx4aIygUmt2O5UhQ@1000x563.jpg'); background-size:cover; transform:translate(0px,338px);}
#bord5{box-sizing:border-box; background:url('http://ekladata.com/M6V_1-2FQifSwyV2q53yp7DUF2s@1000x563.jpg'); background-size:cover; transform:translate(300px,169px);}
#bord1:hover,#bord2:hover,#bord3:hover,#bord4:hover,#bord5:hover{z-index:5; width:1000px; height:563px; transform:translate(0px,0px);}
--></style>