Image hover?

HTML & CSS
1

Hello everyone,

My name is Hanna and I’m new to sitepoint.com :slight_smile:

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

You could modify a tooltip example :slight_smile:

3

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 :frowning:

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

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 :slight_smile:

5

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?


<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

Hi Stomme poes,
Thank you so much for that! Worked a like a dream! :slight_smile:

yay!!

Hanna

7

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 : )