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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tooltip Hover Location & Size Problem!

    I am very new to this and took a code from a tutorial I found for a hover button. I don't know how the code works really, but when you hover over "ME" you'll see a pop up bio image. It looks great on my computer, but I can not figure out how to get it to resize or relocate relative to the computer it's on. If the screen is shorter it pops up far too high or large. I'm sure you'll notice it.

    My website: www.keeleanapeck.com

    The code I used for this:
    Code:
     
    <style>
            .tooltip-wrap {
      position: absolute;
        bottom: 50px;  
        padding: 50px 0 0 30px;
        margin: 0 auto 0 50px !important;
    }
    .tooltip-wrap .tooltip-content {
      display: none;
                position: absolute;
      
    }
    .tooltip-wrap:hover .tooltip-content {
      display: block;
      position: absolute;
    </style>
    Code:
    <div class="tooltip-wrap"> 
        <img src="me-(t).png" alt="About Me" />
        <div class="tooltip-content">
          <img src="meme.png" style="position:absolute; width: 720px; top: -520px; background-color:rgba(255,255,255, .6);border-radius: 15px 15px 15px 15px;" />
    </div></div>
    Any help is appreciated. Sorry if I did anything incorrectly in regards to the post. And sorry for my giant face if you open the webpage.

  • #2
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation

    I forgot to mention! I tried changing the img data to % and i tried to mess with the class location/size data and could not figure it out.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,287
    Thanks
    23
    Thanked 611 Times in 610 Posts
    Looks like you did what I would have done: made the ABOUT-ME png visible all the time, but it is so hard to read. If you have style transparent enabled, turn it off. Else redo the png to make it clearer and more readable.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The fonts just weren't black, I made them darker. I was worried about it clashing and looking funny with the top logo, but it doesn't really. Better?


  •  

    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
    •