• Image au survol texte

    Pour illustrer ma proposition d'image au survol d'un texte, voici une version où l'image passe du fond au premier plan mais on peut rendre le fond invisible au départ pour le faire apparaître au survol du texte ou d'un mot; je crois avoir déjà proposé ça...


    Bel automne !

    Survoler pour faire monter l'image de fond. 

     

    Code.
    <div id="fd">
    <p id="txt"><br />Bel automne !<br /><br /><span style="font-size: 28pt;">Survoler pour faire monter l'image de fond.&nbsp;</span></p>
    <p id="im">&nbsp;</p>
    </div>
    <hr style="clear: both;" />

    <style><!--
    #fd{transform:translate(200px,0px); width:800px; height:600px; border:4px solid white; box-shadow:4px 4px 8px black; border-radius:200px;}
    #txt{position:absolute; z-index:2;transition:all 1s linear; transform:translate(0px,0px); width:800px; height:400px; padding:10px 0 0 0; font-size:58pt; color:lime; text-shadow:1px 1px black; text-align:center; }
    #im{transition:all 1s linear; position:absolute; z-index:1;width:800px; height:600px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/23/DSCN5735.JPG'); opacity:0.3; border-radius:200px;}
    #txt:hover{opacity:0;}
    #txt:hover ~ #im{opacity:1;}
    --></style>
    ...
    ...