[Lerura]

Originally Posted by sunfighter

Yes it can be done. You need to work a little on this but it should do what you want.
From The CSS Guru (Drum roll) - http://meyerweb.com/eric/css/edge/popups/demo.html

This demo shows how you can do it, if the text is a child of a hovered item.
It is way to make text appear, but not the way OP wanted it to happen.

I will try to explain:
The OP way:

<div id="mainContainer">
<img src="My.first.picture">    <!--Trigger for My.first.Picture-->
<img src="My.second.picture">    <!--Trigger for My.second.Picture-->
<img src="My.third.picture">    <!--Trigger for My.third.Picture-->
<div class="text">You have hovered one of the picture</div>   <!--<Text for all the images-->
</div>

This cannot be done as the <div class="text"> is not a child of any of the triggering elements.

The Demo way:

<div id="mainContainer">
 <div class="pictureContainer">    <!--Trigger for My.Picture-->
  <img src="My.picture">                 
  <div class="text">You have hovered My.first.picture</div>    <!--Text for My.first.picture-->
 </div>
 <div class="pictureContainer">    <!--Trigger for My.second.Picture-->
  <img src="My.picture">                 
  <div class="text">You have hovered My.second.picture</div>    <!--Text for My.second.picture-->
 </div>
 <div class="pictureContainer">    <!--Trigger for My.third.Picture-->
  <img src="My.picture">                 
  <div class="text">You have hovered My.third.picture</div>    <!--Text for My.third.picture-->
 </div>
</div>

Now the trigger is no longer the images, but the .pictureContainer that contains both the image and it's related text.

As you can see, it requires a different, and larger, tree structure where you have 3 <div class="text">s instead of 1.

If OP wants to change it to the Demo way, make sure that each .pictureContainer exactly fits its contained image, and that the <div class="text">s are position:absolute

Maybe it will fulfil your requirements, though it is not what you asked for.