0

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:

http://i.imgur.com/zIbG27h.png

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?

Lucius
  • 3,705
  • 2
  • 22
  • 41
user1975007
  • 103
  • 2
  • 2
  • 5

1 Answers1

0

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.

Community
  • 1
  • 1
ameed
  • 1,132
  • 6
  • 25
  • Hi Math. Thank you for your answer. I'm yet to figre out how to do this as I don't really understand what you mean. Could you possible explain again? I'm trying to figure out what to do with the link you gave me. – user1975007 Jan 26 '13 at 12:24
  • Create an image that is just like the existing circle, but with the center transparent. Then, follow the method above to position it on top of the original `div` with CSS absolute positioning. – ameed Jan 26 '13 at 17:45