Translation 2

Toujours dans mes bricolages: si vous voulez cacher ce qui dépasse de votre montage, où les éléments sont en position:absolute, il vous faut placer ce montage dans un cadre (div) qui lui, cachera ce qui dépasse, ce que votre montage ne peut pas faire.

*******************

***********************
<div style="width: 80vw; height: 45vw; margin: 1vh auto;">
<div style="position: absolute; width: 80vw; height: 45vw; border: 0.1vh solid black; text-align: left; background: linear-gradient(to bottom, #F7BE81 0%,#F7F2E0 100%); background-size: cover; overflow: hidden;">
<p id="ong1" class="ong">1</p>
<p id="ong2" class="ong">2</p>
<p id="ong3" class="ong">3</p>
<p id="mai1" class="mai">&nbsp;</p>
<p id="mai2" class="mai">&nbsp;</p>
<p id="mai3" class="mai">&nbsp;</p>
</div>
</div>
<style><!--
.ong{position:absolute; z-index:5; width:2vw; height:3vw; line-height:3vw; text-align:center;font-size:2vw;border:0.1vh solid black; border-radius:0.5vw 0 0 0.5vw; background:rgba(102,255,255,0.5); box-shadow:inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white;}
#ong1{transform:translate(77.9vw,2vw);}
#ong2{transform:translate(77.9vw,6vw);}
#ong3{transform:translate(77.9vw,10vw);}
.mai{position:absolute; z-index:1; width:80vw; height:45vw; background:cover; transition:all 1s linear;}
#mai1{background:url('https://ekladata.com/wvtS0NCWXRhRT3lpQQfUQns_l_E@1536x864.jpg'); transform:translate(-80vw,0vw);}
#mai2{background:url('https://ekladata.com/-V6OJtmv-_P7d3cs3ewQAE3ynUU@1536x864.jpg'); transform:translate(80vw,0vw);}
#mai3{background:url('https://ekladata.com/OCGOHWtlK_K041kwLzjTqEiQWYc@1536x864.jpg'); transform:translate(-80vw,0vw);}
#ong1:hover ~ #mai1,#ong2:hover ~ #mai2,#ong3:hover ~ #mai3{z-index:2; width:80vw; transform:translate(0vw,0vw);}
--></style>