Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Senior Member Sean Thompson's Avatar
    Join Date
    May 2012
    Posts
    106
    Member #
    31720
    If you look at a website like stectech.com their nav hover links are exactly what I want.

    When I use this code:

    a:hover {background-image:url(hoever1.png)}

    The image shows up on hover, but not the FULL image. I need this rounded rectangle to show up on hover centered around the text-and show the whole image. Right now it just uses like a corner of the image to lay directly over the word "Home" but doesn't physically stretch outside of the text at all.

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Your link isn't working, but try this:

    Background-size:cover;

    No support in IE8 and below, but it works otherwise.

    EDIT: Out of curiosity (remembering that I haven't exactly seen what you're talking about), why not use CSS gradients and border-radius?
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member Sean Thompson's Avatar
    Join Date
    May 2012
    Posts
    106
    Member #
    31720
    I tried background-size: cover; . It doesn't work, it still limits the image to only showing up immediatley behind the text(doesn't show the full nice big encompassing image).

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Perhaps a link, then?
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Senior Member Sean Thompson's Avatar
    Join Date
    May 2012
    Posts
    106
    Member #
    31720
    The site is just local right now. If you look at stectech.com and look at their nav menu you will see when you hover over the link the image that appears behind the text. That is what I want basically. Adding a background image doesn't work because it will not extend beyond the font on either side.

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Well, as I mentioned before, you can use border-radius and background-color or css gradients to achieve that effect
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Senior Member Sean Thompson's Avatar
    Join Date
    May 2012
    Posts
    106
    Member #
    31720
    ok ill try that next

  9. #8
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Quote Originally Posted by Sean Thompson, post: 248186
    The site is just local right now. If you look at stectech.com and look at their nav menu you will see when you hover over the link the image that appears behind the text. That is what I want basically. Adding a background image doesn't work because it will not extend beyond the font on either side.
    The reason he's asking for a link... Is to see what ou have.

    As with most things web based there are usually a hundred ways of doing things... Since we can't see your code, its all guessing... He's made several valid suggestions but without knowing what you have, all we can do is guess at what you're doing and how your doing it, which is generally just a waste of time.

  10. #9
    Senior Member Sean Thompson's Avatar
    Join Date
    May 2012
    Posts
    106
    Member #
    31720
    I ended up using border-radius and background color and it works pretty well. I put some   tags in with my anchor text to make the hover shape extend out to the sides how I want. Thanks for the help.

  11. #10
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Padding is the best way to set your size around your text... Eliminates the need for extra   for spacing.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

how to make hover outline extend beyond the link text

,

which can be seen fully

Click on a term to search for related topics.
All times are GMT -6. The time now is 12:30 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com