How to make an image appear on text rollover over on the original webpage

Question

I'm trying to create a neat interface where it's a list of text and an image of the item would appear below the text when hovering. I've seen many examples of images appearing over the mouse, but I really want the image to appear on the actual webpage when hovering.

Here's a brief diagram of what I'm after

enter image description here

CSS Example: http://jsfiddle.net/cwnEN/ – ComFreek Nov 10 '11 at 14:59 — ComFreek, Nov 10 '11 at 14:59
that looks like exactly what im after, thanks! – aaron_m12345 Nov 10 '11 at 15:08 — aaron_m12345, Nov 10 '11 at 15:08

Grant Thomas · Accepted Answer · 2011-11-10T14:54:43.910

You could do it with CSS states, for a simple example:

.rolloverImage {
    display:none;
}
.rolloverImage:hover {
    display:block;
}

<img class="rolloverImage" ... />

This hides the element to which the class is applied, and shows it when the mouse hovers over, but we can tweak this to say hide the element, and show when something else is hovered over:

.rollover img {
    display:none;
}
.rollover:hover img {
    display:block;
}

<span class="rollover">
  <!-- some none hidden text here -->
  <img ... />
</span>

Without details of your current set up, this might not just slot into your work; but the principle is simple: include your stylesheet (assuming you have one already, if not, create one) in your web-page via a <link />; implement your styles accordingly then apply the class to the concerning elements.

This is primitive, and not a full example, obviously, you will need to work with this to get the desired output (for example, whether to show as a block, inline-block, or in absolute position, etc.)

it seems to leave a
after the image is revealed. any way to stop that? probably really simple fix — aaron_m12345, Nov 10 '11 at 15:29

How to make an image appear on text rollover over on the original webpage

1 Answers1