Devinettes.

 Certains blogs proposent des questions avec réponse quelques jours plus tard.
Nous pouvons masquer les réponses pour ne pas gâcher le plaisir du visiteur, qui les fera apparaître s'il le souhaite.
Pour cela, nous disposons de plusieurs façons de présenter les réponses.
La première, la rendre opaque au survol de la reponse.
<p style="float: left; width: 20vw; font-size: 1vw; border: 0.2vh solid black;">A quoi reconna&icirc;t-on une m&egrave;re poule ?</p>
<p style="float: left; width: 50vw; font-size: 1vw; border: 0.2vh solid black; margin: 0 0 0 2vw;"><span id="rep1">La nuit, quand tu te l&egrave;ves pour aller pisser, quand tu reviens te coucher, ton lit est d&eacute;j&agrave; fait.</span></p>
<style><!--
#rep1{opacity:0;}
#rep1:hover{opacity:1;}
--></style>

A quoi reconnaît-on une mère poule ?

La nuit, quand tu te lèves pour aller pisser, quand tu reviens te coucher, ton lit est déjà fait.

Par translation: survol réponse

Comment appelle-t-on un homme qui a perdu 95% de ses capacités intellectuelles?

<div id="rep2a">
<p id="rep2b">Un veuf.</p>
</div>
<style><!--
#rep2a{ position: relative; float: left; width: 5vw; font-size: 1vw; border: 0.2vh solid black; margin: 0 0 0 2vw; overflow: hidden;}
#rep2b{width:10vw; height:2vh; font-size: 1vw; transform:translate(-5vw,0vh); transition:all 0.5s linear;}
#rep2b:hover{transform:translate(0vw, 0vh);}
--></style>

Autre translation qui oblige à placer un bouton invisible: survol réponse

Comment appelle-t-on un alcootest en terme culinaire ?

<p style="float: left; width: 30vw; font-size: 1vw; border: 0.2vh solid black;">Comment appelle-t-on un alcootest en terme culinaire ?</p>
<div style="position: relative; float: left; width: 15vw; height: 3vh; font-size: 1vw; border: 0.2vh solid black; margin: 0 0 0 2vw; overflow: hidden;">
<p id="rep3a">&nbsp;</p>
<p id="rep3b">Un souffl&eacute; aux amendes.</p>
</div>
<style><!--
#rep3a{ position: absolute; z-index:5; width: 15vw; height:3vh;transform:translate(0vw,0vh); }
#rep3b{width:15vw; height:3vh; font-size: 1vw; background:lime; transform:translate(0vw,-3vh); transition:all 0.5s linear;}
#rep3a:hover ~ #rep3b{transform:translate(0vw, 0vh);}
--></style>

Survolez la question.

Quand un homme ouvre-t-il la portière de sa voiture pour sa femme?

Quand c'est une nouvelle voiture... ou une nouvelle femme.

<p id="q4">Quand un homme ouvre-t-il la portière de sa voiture pour sa femme?</p>
<p id="rep4">Quand c'est une nouvelle voiture... ou une nouvelle femme.</p>
<p id="q4">Quand un homme ouvre-t-il la portière de sa voiture pour sa femme?</p>
<p id="rep4">Quand c'est une nouvelle voiture... ou une nouvelle femme.</p>
<style><!--
#q4{position:absolute; z-index:5; transform:translate(0vw,0vh);width:40vw; height:4vh; border:0.2vh solid black; font-size:1vw;}
#rep4{position:absolute; z-index:1; transform:translate(0vw,0vh);width:40vw;height:4vh; border:0.2vh solid black; font-size:1vw; text-align:center; transition:all 1s linear;}
#q4:hover ~ #rep4{transform:translate(40vw,0vh);}
--></style>

Idem pour m'amuser :