• Titre

    Un article où j'utilise l'attribut "title", pour afficher un commentaire sur une image sans pouvoir en modifier la forme, me fait revenir sur une autre façon plus souple, mais plus compliquée en code, qui permet de décorer l'information et d'y ajouter des images, éventuellement et même des liens.

    Un exemple simple à survoler:

     

    Un ou des commentaires que vous pouvez décorer comme vous le souhaitez, en les positionnant où vous le voulez et/ou y placer images, gif...

    Hibiscus de la Réunion.

    <div style="width: 60vw; height: 33.75vw; border: 0.6vh ridge white; margin: 1vh auto; text-align: left;">
    <p id="sur1">&nbsp;</p>
    <p id="sur2">Un ou des commentaires que vous pouvez d&eacute;corer comme vous le souhaitez, en les positionnant o&ugrave; vous le voulez et/ou y placer images, gif...</p>
    <p id="sur3">Hibiscus de la R&eacute;union.</p>
    </div>

    <style><!--
    #sur1{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/cPV5UnniaAtiJqm9ucOgw4XkO4c.jpg'); background-size:cover;}
    #sur2{position:absolute; z-index:1; width:12vw; height:18vw; border-radius:4vw; padding:1vw; transform:translate(4vw,5vw); background:rgba(255,255,255,0.8); text-align:center; font-size:1.2vw; box-shadow:inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white; display:none;}
    #sur3{position:absolute; z-index:1; width:8vw; height:8vw; border-radius:50%; padding:1vw;transform:translate(48vw,10vw); background:rgba(255,100,255,0.8); text-align:center; font-size:1.2vw; line-height:4vw; box-shadow:inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white; display:none;}
    #sur1:hover ~ #sur2,#sur1:hover ~ #sur3{display:block;}
    --></style>