• Texte au survol

    Pour faire apparaître un texte ou une autre image au survol d'une autre, ou à l'inverse une image au survol d'un texte, il faut utiliser un bouton invisible, qui reste toujours accessible, en premier plan.

    Le fait de faire se déplacer une image ou d'en changer l'opacité ne doit pas la placer au dessus du bouton, bouton qui est en réalité une zone invisible, car l'animation serait arrêtée.
    Survolez cette photo.

     



    Un homme âgé se retrouve sur la table d'opération attendant d'être opéré.
    Il insiste pour que ce soit son gendre, l'éminent chirurgien, qui procède à cette chirurgie.
    Avant d'être endormi, il demande à parler à son gendre et lui dit :
    Ne sois pas nerveux, fais de ton mieux.
    Et si ça tourne mal et que quelque chose devait m'arriver, souviens-toi que ta belle-mère va aller habiter chez toi !!

     

    Code du montage.
    <div id="fd">
    <p id="bt">&nbsp;</p>
    <p id="txt">Votre texte</p>
    </div>
    <p>&nbsp;</p>

    <style><!--
    #fd{transform:translate(200px,0px); width:800px; height:600px; border:4px solid white; box-shadow:4px 4px 8px black; border-radius:200px; overflow:hidden; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/23/DSCN5762.JPG');}
    #txt{transition:all 1s linear; transform:translate(-800px,0px); width:800px; height:800px; font-size:18pt; color:coral; text-shadow:1px 1px black; text-align:center; background-color:rgba(192,192,192,0.8);}
    #bt{position:absolute; z-index:5; transform:translate(0px,0px); width:800px; height:600px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/1px-par-1px.png');}
    #bt:hover ~ #txt{transform:translate(0px,0px);}
    --></style>
    Un rappel:en HTML,  la ligne du bouton devra précéder, de près ou de loin, celle de l'élément qu'il anime. même si en CSS, cet ordre n'est pas respecté.