Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •