• Exemple 91

    Cette page pour revenir sur l'attribut pour qu'un cadre n'affiche pas ce qui en dépasse: overflow:hidden (dépassement caché).

    Il ne faut pas oublier (comme moi) que pour que cet attribut fonctionne, il faut que le cadre soit positionné: position:relative; ou absolute, éventuellement.

    Ainsi, vous pouvez ne faire apparaître qu'un partie d'un autre cadre ou d'un image que vous pouvez animer au clic ou au survol.

    Un exemple avec 5 images en 1000x563px; leur forme peut être autre que rectangulaire (rond, ovale, losange...)

     

     

     

     

    <div style="position: relative; width: 1000px; height: 563px; margin: 5px auto; text-align: left; border: 1px solid black; background:url('http://ekladata.com/r69fC5bULggt_T4JUn6GBzA6SDs.jpg'); background-size:1000px 563px; background-size:cover; overflow: hidden;">
    <p id="ext1" class="ext">&nbsp;</p>
    <p id="ext2" class="ext">&nbsp;</p>
    <p id="ext3" class="ext">&nbsp;</p>
    <p id="ext4" class="ext">&nbsp;</p>
    </div>
    <style><!--
    .ext{position:absolute; z-index:1; border:5px solid white; background-size:1000px 563px; transition:all 1s linear;}
    #ext1{box-sizing:border-box; width:100px; height:300px; background:url('http://ekladata.com/1OHwPhHvAtwT5GHYfI467o5DrYU.jpg'); transform:translate(-80px,0px) rotate(15deg);}
    #ext2{box-sizing:border-box; width:100px; height:300px; background:url('http://ekladata.com/r6uRT896KH0R6cSEM3NszciXHKw.jpg'); transform:translate(-80px,263px) rotate(-15deg);}
    #ext3{box-sizing:border-box; width:100px; height:300px; background:url('http://ekladata.com/DJE_mXBGoMOcdHbnsNLcDMAXeUE.jpg'); transform:translate(980px,0px) rotate(-15deg);}
    #ext4{box-sizing:border-box; width:100px; height:300px; background:url('http://ekladata.com/RnczZrbJZeyqyEmoihuuflLfmmQ.png'); transform:translate(980px,263px) rotate(15deg);}
    #ext1:hover,#ext2:hover,#ext3:hover,#ext4:hover{z-index:5; width:1000px; height:563px; background-size:1000px 563px; transform:translate(0px,0px) rotate(0deg);}
    --></style>