带信息的div圈，悬停时显示所有信息

Question

I want to have three circular divs next to each other (that's not a problem). At the bottom of the circle it will show the first words of my information text. On hover the information text will go up so you can read the whole text:

What I tried to do at first was to create a div width: 170px and height: 170px , set a circle as a background in my CSS 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.

Whats the best way to do this?

Answer 1

Make an img that floats on top of the text (using CSS absolute positioning) that has the inner part of the circle transparent. See here for more information.