Member Avatar for hazzag1995

I want to make a image pop up on my site, where if you hover over a line of text, a image will pop up on top of everything else on the page, using HTML5 and CSS3, can someone help me with this?

~I've tried some tutorials online but they havent worked.

Thanks in advance!

  • 4 Contributors
  • 6 Replies
  • 257 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by hazzag1995

Dani AI

Generated

A simple, CSS-only way to show an image when the user hovers a word (no jQuery) and still keep it keyboard-accessible. This respects 's "HTML5 and CSS3" requirement and answers 's request for a minimal starting point; and were on the right track with "tooltip"-style behavior, but the snippet below shows how to do it without JS.

<p>
  Here is a sentence with a
  <span class="preview" tabindex="0">
    keyword
    <img src="path/to/image.jpg" alt="Short description">
  </span>.
</p>

<style>
.preview { position: relative; cursor: help; }
.preview img {
  position: absolute;
  top: -8px;
  left: 100%;
  margin-left: 10px;
  width: 220px;
  max-width: 60vw;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  border: 1px solid #ccc;
  background: #fff;
}
.preview:hover img,
.preview:focus img {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
</style>

Notes and troubleshooting:

  • Accessibility: tabindex="0" lets keyboard users focus the word; use meaningful alt text (or alt="" for purely decorative previews). Add aria-describedby if the preview conveys essential content.
  • Stacking/overflow: if the popup is clipped or can't appear above other elements, check ancestor overflow, transform, or z-index — those create stacking contexts. A pure-CSS solution can't move the element outside its stacking context; fixing that requires placing the popup at the document root (needs a small JS helper) or removing the offending CSS on ancestors.
  • Mobile: hover doesn't exist on touch devices. Provide a fallback (make the trigger clickable, use :active, or implement a small JS toggle) and use responsive image sizes or loading="lazy" for performance.

This gives a compact, accessible starting point; tweak sizes, placements, and transitions to match your design.

Recommended Answers

All 6 Replies

Member Avatar for JorgeM

It would be good if you can start by providing what you've done so far.

Member Avatar for hazzag1995

I havent really got anything. im going to have a paragraph of test (not yet written) with certain words which if you hover over, the image appears.

Member Avatar for hazzag1995

*Text

Member Avatar for Meir David

Hi,
You are asking like tooltip...as ruin mentioned the link that will workout for further..just give a try to do it..

Member Avatar for hazzag1995

no, not jquery, HTML5 and CSS3

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.