...

View Full Version : Circle div to show more information on hover



bringarn1
01-26-2013, 12:38 PM
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?

VIPStephan
01-26-2013, 02:22 PM
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.

bringarn1
01-26-2013, 03:06 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum