Hover state for a lightbox thumbnail

Design help General
1

How do I get a hover state for a lightbox thumbnail so I can swap images on hover? This topic comes up all of the time and no one ever actually answers it… so I’m bringing it back. The conversations of the past always veer off to something very specific and complicated… and not exactly what I need—which is incredibly basic. Can we use a hover state for a lightbox thumbnail to change the thumbnail on hover?

I have a grid of lightbox thumbnails that each pop up to their own set of content. When I hover over one, I want it to swap out to a different image… just like I did on my previous self-coded, non-responsive site… and just like most lightbox links on most sites. I’m here using Webflow to make a responsive site because it’s supposed to simplify basic things like this… not make the very possible, suddenly impossible. I just want to swap the image on hover… like I can do on other image links but not lightbox links. Can it be done?

2

Hello @daveu,

Yes, it is absolutely possible and not complicated.

  1. Add lightbox to the page, give it class, size and position:relative
  2. Thumbnail inside the lightbox give position: absolute and width: 100%
  3. Add one more image inside the lightbox (not media for popup) which will become overlay (for swap), position: absolute, width: 100% and z-index higher than thumbnail. Then make it display: none and opacity: 0%
  4. For lightbox element create interaction with HOVER trigger. It will Affect different element: img-overlay (limit nested elements).
    Hover over: 1st step = display: block, 2nd step = opacity: 100%
    Hover out: 1st step = opacity: 0%, 2nd step = display: none

That is pretty much all. Hope it helps.

Video: https://drive.google.com/file/d/0B-7cg8BSq1Z_V1FPeHlXbUk1Tk0/view

Regards,
Anna

2 Likes
3

You are my hero! Thanks sabanna. That worked brilliantly! :relaxed: :+1:

1 Like
4

:smiley: Glad I could break your frustration :wink:

1 Like
5

I found it a lot easier to simply add a hover state to the overlay image. The overall concept is that you size the Lightbox Link to match the display size of the thumbnail image, then add two image layers inside the Lightbox Link (the thumbnail and the overlay images) and size them to fit inside the Lightbox Link. Then you create an initial state that hides the overlay image (so the thumbnail is visible), and a hover state that shows the overlay image.

Here are the steps:

807×784 34.8 KB

1895×910 1.31 MB

6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.