Survol nom

Survolez les noms en rouge.

Père   et fils: Tu seras un pin, mon fils !

Parabole   Que recevez-vous avec ?

Lanterne   à lumière bleue.

Nuage   timide.

Fourmillière  désertée

Code.


<div style="height: 500px;">
<p id="fd"><br /><br />Survolez les noms en rouge.</p>
<p id="art1"><span id="l1" style="color: red;">P&egrave;re</span><span id="m1">&nbsp;</span>&nbsp; et fils: Tu seras un pin, mon fils !</p>
<p id="art2"><span id="l2" style="color: red;">Parabole</span><span id="m2">&nbsp;</span>&nbsp; Que recevez-vous avec ?</p>
<p id="art3"><span id="l3" style="color: red;">Lanterne</span><span id="m3">&nbsp;</span>&nbsp; &agrave; lumi&egrave;re bleue.</p>
<p id="art4"><span id="l4" style="color: red;">Nuage</span><span id="m4">&nbsp;</span>&nbsp; timide.</p>
<p id="art5"><span id="l5" style="color: red;">Fourmilli&egrave;re</span><span id="m5">&nbsp;</span>&nbsp;d&eacute;sert&eacute;e</p>
</div>


<style><!--
#fd{ position:absolute; transform:translate(0px,0px);float:left; width:800px; height:450px; border:4px ridge white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/textures/bg165.jpg'); border-radius:30%; text-align:center; font-size:26pt; color:lime; text-shadow:1px 1px black;}
#art1{position:absolute; transform:translate(820px,0px); width:350px; height:40px; font-size:12pt;}
#art2{position:absolute; transform:translate(820px,60px); width:350px; height:40px; font-size:12pt;}
#art3{position:absolute; transform:translate(820px,120px); width:350px; height:40px; font-size:12pt;}
#art4{position:absolute; transform:translate(820px,180px); width:350px; height:40px; font-size:12pt;}
#art5{position:absolute; transform:translate(820px,240px); width:350px; height:40px; font-size:12pt;}  
#m1{ position:absolute; transition:all 0.5s linear; width:800px; height:450px; transform:translate(-852px,4px); border-radius:30%; background:url(' http://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2015/septembre/04/DSCN5574.JPG'); opacity:0;}
#m2{ position:absolute; transition:all 0.5s linear; width:800px; height:450px; transform:translate(-886px,-56px); border-radius:30%; background:url(' http://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2015/septembre/04/DSCN5553.JPG'); opacity:0;}
#m3{ position:absolute; transition:all 0.5s linear; width:800px; height:450px; transform:translate(-888px,-116px); border-radius:30%; background:url(' http://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2015/septembre/04/DSCN5557.JPG'); opacity:0;}
#m4{ position:absolute; transition:all 0.5s linear; width:800px; height:450px; transform:translate(-868px,-176px); border-radius:30%; background:url(' http://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2015/septembre/04/DSCN5570.JPG'); opacity:0;}  
#m5{ position:absolute; transition:all 0.5s linear; width:800px; height:450px; transform:translate(-910px,-236px); border-radius:30%; background:url(' http://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2015/septembre/04/DSCN5575.JPG'); opacity:0;}   
#l1:hover ~ #m1{ opacity:1;}
#l2:hover ~ #m2{ opacity:1;}
#l3:hover ~ #m3{ opacity:1;}
#l4:hover ~ #m4{ opacity:1;}
#l5:hover ~ #m5{ opacity:1;}
--></style>
...
Je ne vous cache pas avoir eu quelques difficultés dans le positionnement des images, sans comprendre le principe et en "bricolant" !

J'ai préféré l'affichage par changement d'opacité à "display:none/block)".