Flou

Montage en 1200x675px + bordure et ombre, avec 6 images au ratio 16/9. 

L'utilisation du filtre:blur (flou) rend l'image et sa bordure flous ce qui la fait déborder de son cadre (ici, 320x180px).

J'ai donc ajouté une découpe "aux ciseaux" (clip-path:polygon();) pour couper le flou extérieur et ajouté une bordure de fond comme vu dans une page précédente.

<div style="width: 1200px; height: 675px; margin: 50px auto; text-align: left; background: url('https://ekladata.com/FG_P59Zgy9uNnXOjFJ-F4O5dGvY/4a314999.jpg'); background-size: cover; border: 8px ridge white; box-shadow: 6px 6px 8px black;">
<p id="brd0">SURVOL</p>
<p id="brd1" class="brd">&nbsp;</p>
<p id="bl1" class="bl">&nbsp;</p>
<p id="brd2" class="brd">&nbsp;</p>
<p id="bl2" class="bl">&nbsp;</p>
<p id="brd3" class="brd">&nbsp;</p>
<p id="bl3" class="bl">&nbsp;</p>
<p id="brd4" class="brd">&nbsp;</p>
<p id="bl4" class="bl">&nbsp;</p>
<p id="brd5" class="brd">&nbsp;</p>
<p id="bl5" class="bl">&nbsp;</p>
<p id="brd6" class="brd">&nbsp;</p>
<p id="bl6" class="bl">&nbsp;</p>
</div>
<style><!--
#brd0{position:absolute; z-index:1;width:170px; font-size:40px; color:white; text-shadow:2px 2px black; transform:translate(510px,300px);}
.brd{position:absolute; z-index:1;width:330px; height:190px; background:white; box-shadow:4px 4px 6px black;}
#brd1{ transform:translate(45px,45px);}
#brd2{ transform:translate(435px,45px);}
#brd3{ transform:translate(825px,45px);}
#brd4{ transform:translate(45px,430px);}
#brd5{ transform:translate(435px,430px);}
#brd6{ transform:translate(825px,430px);}
.bl{position:absolute; z-index:2; width:320px; height:180px; filter:blur(25px); clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transition:all 1s;}
#bl1{background:url('https://ekladata.com/gC5HqqX_3kk8LeOM2UBMWtJPtnI.jpg'); background-size:cover; transform:translate(50px,50px);}
#bl2{background:url('https://ekladata.com/DvwvyXchSNYZ7MgHEjI09vZVBcM.jpg'); background-size:cover; transform:translate(440px,50px);}
#bl3{background:url('https://ekladata.com/oeh8-_M79BYUCwNk3T_L4EIDZKE.jpg'); background-size:cover; transform:translate(830px,50px);}
#bl4{background:url('https://ekladata.com/DQEl_x5F1e2wDf3PMtPTLcvghtM.jpg'); background-size:cover; transform:translate(50px,435px);}
#bl5{background:url('https://ekladata.com/OfDXY1smcg_5HAtNVX-iM2z75Yo.jpg'); background-size:cover; transform:translate(440px,435px);}
#bl6{background:url('https://ekladata.com/iyWXiYgFzlxLx7sVGiqqGCDSHp8.jpg'); background-size:cover; transform:translate(830px,435px);}
#bl1:hover,#bl2:hover,#bl3:hover,#bl4:hover,#bl5:hover,#bl6:hover{z-index:5; width:1200px; height:675px; filter:blur(0px);transform:translate(0px,0px);}
--></style>