Dans le html du blog, les images sont entourées d'une bordure blanche ce qui décale les positionnements; j'espère avoir supprimé ce paramètre mais après avoir publié cette page où j'ai placé les images en fond de paragraphes !
<div style="width:732px; height:549px; margin:50px auto;">
<p id="brm1" class="brm"> </p>
<p id="brm2" class="brm"> </p>
<p id="brm3" class="brm"> </p>
<p id="brm4" class="brm"> </p>
<p id="brm5" class="brm"> </p>
<p id="brm6" class="brm"> </p>
<p id="vol">SURVOL</p>
</div>
<style><!--
.brm{position:absolute; z-index:1; width:732px; height:549px; margin-top:0px; border:4px ridge grey; transition:all 1s;}
#brm1{box-sizing:border-box; width:200px; height:150px; transform:translate(0px,50px); background:url('https://i.goopics.net/hnlmtd.jpg');background-size:cover;}
#brm2{box-sizing:border-box; width:200px; height:150px; transform:translate(276px,0px); background:url('https://i.goopics.net/q5fuzg.jpg');background-size:cover;}
#brm3{box-sizing:border-box; width:200px; height:150px; transform:translate(532px,50px); background:url('https://i.goopics.net/s9xkn2.jpg');background-size:cover;}
#brm4{box-sizing:border-box; width:200px; height:150px; transform:translate(0px,349px); background:url('https://i.goopics.net/0oida8.jpg');background-size:cover;}
#brm5{box-sizing:border-box; width:200px; height:150px; transform:translate(276px,399px); background:url('https://i.goopics.net/16chbv.jpg');background-size:cover;}
#brm6{box-sizing:border-box; width:200px; height:150px; transform:translate(532px,349px); background:url('https://i.goopics.net/i6ih4l.jpg');background-size:cover;}
#vol{position:absolute; z-index:1; width:150px; font-size:35px; transform:translate(300px,220px);}
#brm1:hover,#brm2:hover,#brm3:hover,#brm4:hover,#brm5:hover,#brm6:hover{z-index:5; width:732px; height:549px; transform:translate(0px,0px);}
--></style>
SURVOL