Wrap the text in an element and use CSS to show an image on hover. Here are three common approaches: background-image, absolutely positioned , and CSS pseudo-element. Pick the one that fits your layout.

1. Background-image on hover (good for decorative images)

<style>
.hover-text {
  display: inline-block;
  position: relative;
  padding: 4px 6px;
  cursor: pointer;
}

/* image appears as background when hovering */
.hover-text:hover::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;                /* place below the text */
  width: 200px;
  height: 150px;
  margin-top: 8px;
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  pointer-events: none;     /* lets mouse pass to the text */
  z-index: 10;
}
</style>

<span class="hover-text">Hover over me</span>

2. Toggle a positioned (better for accessibility / real images)

<style>
.hover-wrap {
  display: inline-block;
  position: relative;
}
.hover-wrap img {
  position: absolute;
  left: 0;
  top: 100%;
  width: 200px;
  height: auto;
  margin-top: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  opacity: 0;
  transform-origin: top;
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
  z-index: 10;
}
.hover-wrap:hover img,
.hover-wrap:focus-within img {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
</style>

<span class="hover-wrap">
  <span tabindex="0">Hover (or focus) me</span>
  <img src="image.jpg" alt="Preview image">
</span>

3. CSS-only using background on a sibling (if structure allows)

<style>
.container { position: relative; display: inline-block; }
.text { cursor: pointer; padding: 4px; }
.preview {
  position: absolute;
  left: 0;
  top: 100%;