• 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.

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

    1

    2

    3

     

     

     

    ***********************
    <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('http://ekladata.com/wvtS0NCWXRhRT3lpQQfUQns_l_E@1536x864.jpg'); transform:translate(-80vw,0vw);}
    #mai2{background:url('http://ekladata.com/-V6OJtmv-_P7d3cs3ewQAE3ynUU@1536x864.jpg'); transform:translate(80vw,0vw);}
    #mai3{background:url('http://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>