SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2002
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Want to display entire image on hover

    I'm new to this board (hi everyone!) and have a CSS question.

    When I mouseover (Hover over) some text, I want an image to pop up under the text. OK I got that to happen (see code below). It looks great, everything is ok except for one thing: the image is confined to the rectangular highlighted area around the text. i.e. little bits of the image are cut off. I want the image to be free of the boundaries, but don't know how to do it, or even if css allows it.

    My CSS code that looks like this:

    .HdrScrLnk { color: #ffffff; text-decoration: none; font-style: italic; }
    A.HdrScrLnk:hover { color: #cc0066; background-image: url(leaf3.gif); background-repeat: no-repeat; background-position: center; }

    Thanks for any help you can give and any direction you can point me.

  2. #2
    Degrading Gracefully PalmerB's Avatar
    Join Date
    Sep 2001
    Location
    Ohio - U.S.A. Outlook: Cautiously Optimistic
    Posts
    3,283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I *think* you need to add the margin attribute to your class.

    A.HdrScrLnk:hover { color: #cc0066; background-image: url(leaf3.gif); background-repeat: no-repeat; background-position: center; margin: ?px}

    Fiddle with the amount of pixels (px) until it shows the whole image.

    If that doesn't work use the padding attribute in the same manner.

    Good luck,
    Palmer

  3. #3
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem, as you have guessed, is that the background image will only display as the background of the box in which the text is contained. What might be worth trying is setting the width and height of that box to the dimensions of the image when you hover over it:
    Code:
    a.HdrScrLnk:hover {
      color: #cc0066;
      background-image: url(leaf3.gif);
      background-repeat: no-repeat;
      background-position: center;
      display: block;
      width: 150px; /* Width of the background image */
      height: 100px; /* Height of the background image */
    }


Bookmarks

Posting Permissions

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