Member Avatar for TLCJohn

hi there, happy New Year to everyone.

I have a problem, and wondered if you guys could help? I am using lightbox 2.0 which has the usual CSS and Java components, but what I am trying to do is add a magnifying glass to the original picture, so that when somebody hovers over the original image they see a magnifying glass come up in a certain position on the image, which will hopefully indicate that they can see a larger version by clicking on it? I hope this makes sense?

Hopefully one of you kind coders out there will be able to help.

All the very best.

Kind regards

John

  • 4 Contributors
  • 3 Replies
  • 244 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by nospryexpert

Dani AI

Generated

A quick, practical way to get the UX you want (hover magnifier cue that still opens Lightbox) is to combine a visual overlay + the native zoom cursor for desktops, and optionally add a JS "lens" plugin only if you need true in-place magnification.

: put the overlay inside the same anchor that opens Lightbox so the click still works. Make the anchor position:relative, absolutely position a small magnifier icon in a corner, and use pointer-events: none on the icon so clicks pass through to the link. pointed toward the cursor idea — use cursor: zoom-in alongside the icon as an extra affordance. mentioned jqZoom; that (and libraries like jQuery Zoom/elevateZoom) are useful when you want the image area itself to show a magnified portion on hover, but they are heavier than a simple visual cue.

Example (HTML + CSS):

<a class="lightbox-thumb" href="images/image-large.jpg" aria-label="Open larger image">
  <img src="images/image-thumb.jpg" alt="Thumbnail">
  <span class="magnifier" aria-hidden="true"></span>
</a>

.lightbox-thumb { position:relative; display:inline-block; cursor:zoom-in; }
.lightbox-thumb img { display:block; }
.magnifier {
  position:absolute; right:8px; bottom:8px; width:28px; height:28px;
  background: url('mag.png') center/contain no-repeat;
  pointer-events:none; opacity:0; transition:opacity .12s;
}
.lightbox-thumb:hover .magnifier,
.lightbox-thumb:focus-within .magnifier { opacity:1; }

@media (hover:none) {
  /* touch devices: show a persistent cue or "Tap to enlarge" text */
  .magnifier { opacity:1; }
}

Implementation tips: always link the anchor href to the full-size image (so Lightbox keeps working), preload the large image if you expect hover-zoom, provide a visible focus state for keyboard users (use :focus or :focus-within), and handle touch separately (hover cues don’t exist—use a small persistent label or rely on the native tap). If you need to magnify tiny text inside the image, use a lens plugin and ensure a high-resolution source image.

Recommended Answers

All 3 Replies

Member Avatar for Arkinder

Use the property.


Regards, Arkinder

Member Avatar for nhorstmeier

Hi John,

I think I'm looking for the same type of thing you are. In my case the image has some mall text that I'm looking to magnify when the user hovers over it. Does this sound like the same type of goal you're going for?

Regards,

Nic

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.