Image Overlay on Lightbox Thumb

Design help General
1

Hey Guys!

I am having trouble creating a hover image overlay on my lightbox. Everytime I try to drop a DIV onto the lightbox image, it creates a totally new div area! Please see here;

Imgur

I have tried to reshape the new div that I drop in “display” settings, but I cant seem to get it to go OVER TOP of the lightbox image!

“Help me Webflow community! You’re my only hope!”

Thanks,

Daniel

2

I’ve managed to make some progress using this tutorial;

https://webflow.com/website/Demo-Kit

Now it looks like this;

Imgur

Can anybody help me resize this to the image it is on top of? Thx!

3

Hi @Raolin, can you post your read-only link so we can take a peek? Learn web design with free video courses and tutorials | Webflow University

Thanks in advance!

4

Check it out here;

https://preview.webflow.com/preview/builderdemo?preview=039786ab6442c6e86202e03a7d1038d4

The 3 images in the the “View Some of our Projects Section” are all functioning lightboxes. I essentially want to make them hoverable with “click for more images.” Just like on Webflow’s example here;

http://help.webflow.com/lightbox-overview

Thanks so much for helping out =D

5

Just to note as well, I have tried to follow the examples here;

https://preview.webflow.com/preview/demokit?preview=72388b288a26874be319ca1f7412d4eb

There must be something I’m missing along the way though…

6

Furthermore… I think my specific issue is adding the appropriate lightbox overlay which is exemplified here;

https://preview.webflow.com/preview/example-lightbox-hover?preview=bb9f5017d6a77f61ec013509c21dd4f0

Maybe I am doing something wrong in the settings?

Thanks,

Daniel

7

Hi @Raolin - the way you get the overlay to work is by

  1. giving your lightbox a class

  2. Setting the position of your lightbox to position:relative

    358×502 32.8 KB

  3. Then taking your overlay

    668×556 486 KB

  4. And giving it position:absolute with a setting of “full”

    476×514 47.9 KB

  5. And making it height:100%

  6. Then give it a z-index of anything greater than 0

    452×672 54.5 KB

  7. and obviously then style it as normal. You can use hover effects to change the opacity as normal etc.

Any questions feel free to ask :smile:

Arthur

8

Arthur-- awesome!! I will test this out soon as I get home :smiley:

Thanks!!

1 Like
9

Hi @Raolin, thanks for the link. I think this demo may be helpful, but if I’m way off just let me know and I’ll take another look. One of the elements in this demo is a lightbox.

Demo: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page Title: Fade Overlay on Hover

Hope this helps!

10

Thanks man!! Figured it out =D

2 Likes
11

Perfect demo, dude. It solved my problem - the same by the way :smile:
{agenciafoco.webflow.com}

Cheers!!

2 Likes
12

Can anyone share an updated link for the demo? ( https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb)

It takes me here:

957×731 81.4 KB

Thank you!