• Art.24d.7.21

    Nous pouvons être amenés à vouloir faire afficher des images depuis l'extérieur du cadre du montage (survol flèches); dans ce cas, il ne faut pas oublier d'indiquer au cadre de cacher ce qui en dépasse par l'attribut: overflow:hidden; mais pour que cet attribut fonctionne, il faut aussi paramétrer le cadre en position; la position:relative; est celle par défaut mais, dans ce cas, il faut l'écrire tout de même.

    > <

    **************
    <div style="position: relative; overflow: hidden; width: 1000px; height: 562px; border: 6px ridge white; box-shadow: 4px 4px 6px black; margin: 20px auto; text-align: left; background: url('http://ekladata.com/ikwJP3x4bLJrvGHK0qnvA6fzXBo@1000x562.jpg'); background-size: cover;"><span id="gch">&gt;</span> <span id="drt">&lt;</span> <img id="mgg" src="http://ekladata.com/BI0Q35L9jOaG0-1HdO0dDKWvgsc@1000x562.jpg" alt="" /> <img id="mgd" src="http://ekladata.com/gsDIztgZJNDZMC8ylnQmIUJO6E0@1000x562.jpg" alt="" /></div>
    <style><!--
    #gch{position:absolute; z-index:5; font-size:60px; color:white; text-shadow:2px 2px black; transform:translate(20px,220px);}
    #drt{position:absolute; z-index:5; font-size:60px; color:white; text-shadow:2px 2px black; transform:translate(920px,220px);}
    #mgg{position:absolute; z-index:1; width:1000px; height:562px; transform:translate(-1010px,0px); transition:all 1s;}
    #mgd{position:absolute; z-index:1; width:1000px; height:562px; transform:translate(1010px,0px); transition:all 1s;}
    #gch:hover ~ #mgg,#drt:hover ~ #mgd{transform:translate(0px,0px);}
    --></style>