Circle div to show more information on hover

I want to have three divs next to eachother(that's not a problem) that are circles and at the bottom of the circle it will show the first words of my information text and on hover the information text will go up so you can read the whole text.

I can't explain it better, so let me show you with pictures:
Normal: http://i.imgur.com/qd0w0fP.png
Hover: http://i.imgur.com/UmzmW74.png

What I tried to do at first was to create a div width: 170px and height 170px and in my CSS set a circle as a background. And do class:hover to bring up the text.

What I realised while attempting this was that I can't hide some of the text "behind" the circle like in the normal picture I posted above.

Now I need a new method.. Whats the best way to do this?

If you wanted to work with images and have a solid background (or otherwise control over the background) then create a circle on a white background with a transparent “hole” in it. Alternatively you can work with CSS 3’s border-radius property. Note, however, that it doesn’t work in IE 8 and Opera used to have problems with overflowing content, too (I don’t know how it has developed in recent versions). But if necessary it can be overcome with some workarounds.

Here is another picture that explains better what I mean
http://i.imgur.com/zIbG27h.png

I want it to be text written on the page and no written on the picture. I'm sure this is possible somehow but I haven't managed to find out how yet.

Thank you for your reply VIPStephan but I still don't understand how to do this.
I will keep on searching for a solution.