• Apparition

    Faire apparaître un mot ou une image au survol d'une zone, d'un mot ou, à l'inverse, faire apparaître un texte au survol d'un image.
    Je me suis amusé à publier un article avec un écrivain à découvrir et je vais reprendre le principe ici.
    Créer une zone vide qui au survol, affiche à l"intérieur un texte, comme une réponse à une question:Survol ici:Coucou !
    <span id="rp1">Coucou !</span>
    <style><!--
    #rp1{opacity:0; color:red; font-size:2vw;}
    #rp1:hover{opacity:1;}
    --></style>

    Le mot qui apparaît peut être affiché où on le veutun autre ! et ce peut-être une image. 

    <p style="font-size: 1.5vw;">Le mot qui appara&icirc;t peut &ecirc;tre affich&eacute; o&ugrave; <span id="rp2"><span style="text-decoration: underline;">on le veut</span></span><span id="rp3">un autre !</span> et ce peut-&ecirc;tre <span id="rp4"><span style="text-decoration: underline;">une image.</span><span id="rp5">&nbsp;</span></span></p>
    <p>...</p>
    <style><!--
    #rp3{position:absolute; z-index:5; font-size:2vw; border:0.1vh solid black; background:yellow; transform:rotate(5deg); margin:5vw 0 0 -15vw; opacity:0;}
    #rp2:hover ~ #rp3{opacity:1;}
    #rp5{position:absolute; z-index:5; width:32vw; height:18vw; background:url('http://ekladata.com/QZyHUJz45PWu-jRiHlNqpdhFZUQ.jpg'); transform:rotate(5deg); margin:5vw 0 0 -35vw; opacity:0.5;}
    #rp4:hover ~ #rp5{opacity:1;}
    --></style>

    Le principe peut être inversé, avec l'apparition du texte, au survol d'un image: plus classique !

     

     

    Le commentaire ici.
    Le code demande d'ajouter un bouton invisible pour que le survol puisse agir n'importe où, sur l'image.