Question/Réponse

<div style="width: 1200px; height: auto; margin: 50px auto; text-align: left;">
<p id="q1">La question.</p>
<p id="sv1">R&eacute;ponse au survol</p>
<p id="rp1">Le texte de la r&eacute;ponse, qui est invisible et qui appara&icirc;t au survol du mot "r&eacute;ponse".<br />Question et r&eacute;ponse sont align&eacute;es.</p>
</div>

<div style="width: 1200px; height: auto; margin: 50px auto; text-align: left;">
<p id="q2">La question.</p>
<p id="sv2">R&eacute;ponse au survol</p>
<p id="rp2">Le texte de la r&eacute;ponse, qui est invisible et qui appara&icirc;t au survol du mot "r&eacute;ponse".<br />Question, le mot "R&eacute;ponse" et le texte de la r&eacute;ponse sont les uns sous les autres.</p>
</div>
<style><!--
#q1{float:left; width:120px; height:auto; font-size:20px; transform:translate(0px,0px);}
#sv1{float:left; width:220px; height:20px; font-size:20px; color:green; transform:translate(20px,0px);}
#rp1{position:absolute; width:800px; height:auto;text-align:left; font-size:20px; opacity:0; transform:translate(350px,0px); }
#sv1:hover ~ #rp1{opacity:1;}
#q2{width:120px; height:auto; font-size:20px; transform:translate(0px,0px);}
#sv2{width:220px; height:20px; text-align:left; font-size:20px; color:green; transform:translate(0px,0px);}
#rp2{position:absolute; width:800px; height:auto;text-align:left; font-size:20px; opacity:0; transform:translate(0px,0px); }
#sv2:hover ~ #rp2{opacity:1;}
--></style>

Après un dialogue, il semble que la demande devienne faire apparaître une description courte au survol d'un gif; on revient donc au premier principe: Survol.

Si le code intéresse, je l'indiquerais.