SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Image hover?

  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image hover?

    Hello everyone,

    My name is Hanna and I'm new to sitepoint.com

    My question is:

    I have a simple page layout with 9 images on it (each image within a div) and what I want is when people rollover any one of those images the image get's swapped out with another div showing some content about that image. Is there a way of doing this with pure CSS?

    Thanks in advance.
    Hanna

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,720
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan,

    First of all thank you so much for getting back to me so quick!! I tried the tooltip and almost got it to work but just ran into a small problem

    Here is my code:
    pastebin com/LUQEbnp7

    As you can see from this quick demo when you hover over the Google logo the hover box appears below the logo and not replacing it?

    Any ideas?

    Thanks again!
    Hanna

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,720
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Oh you want it replaced? Well..that's behavior so you would need to look into JS if you want to replace the logo with the box
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    As you can see from this quick demo when you hover over the Google logo the hover box appears below the logo and not replacing it?
    I may be misunderstanding what you want. It looks like you want th image to vanish on hover and the span text to appear instead?

    Code:
    <div class="info">
      <a href="#void">
        <img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="276" height="110" alt="GOOGLEZ" />
        <span>Does it work?</span>
      </a>
    </div>
    Why the anchor? Cause anchors can receive keyboard focus (so keyboarders can get goofy-image-swapping goodness (maybe not always a good thing)) and cause IE6 is still Out There and evil (only does :hover on anchors).

    .info {
    set width and height to image dimensions
    }
    .info a {
    position: relative;
    display: block;
    height: 100%; /*only works if you did indeed give the div explicit (non%) height */
    }

    .info img {
    position: absolute;
    left: 0;
    top: 0;
    }
    .info span {
    position: absolute;
    left: -999px; /*you could use margin here instead*/
    top: 0;
    }

    .info a:focus img, .info a:hover img {
    left: -999px; /*could use margin instead*/
    }

    .info a:focus span, .info a:hover span {
    left: 0; /*or wherever... also could be margin*/
    }

    In your pastebin code you had
    .info:hover{z-index:25; background-color:#ff0}
    maybe expecting the div itself to cover up the img? It can't. The image is a child and children ride on top of new z-indices.

    And in general, I don't like changing display states on :hover etc (display none to block or pos: abso) I think because I got burned by IE back in the day.

  6. #6
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Stomme poes,
    Thank you so much for that! Worked a like a dream!

    yay!!

    Hanna

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Oh, that means I guessed right!

    The pastebin helped, but esp with the mutliple ways and things of CSS, we can help better and faster next time with a sort of clear statement of what exactly you want to happen... Ryan knows how to write the same code I have above, but I don't think he knew what exactly you were asking.

    Glad you're happy with it : )


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
  •