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

Answer 1

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