Streaming live at 10am (PST)

Image Overlay on Lightbox Thumb

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

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

Now it looks like this;

Imgur

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

Hi @Raolin, can you post your read-only link so we can take a peek? http://help.webflow.com/general/guidelines#how-do-i-share-my-sites-read-only-link

Thanks in advance!

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;

Thanks so much for helping out =D

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…

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

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

  3. Then taking your overlay

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

  5. And making it height:100%

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

  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

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

Thanks!!

1 Like

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!

Thanks man!! Figured it out =D

2 Likes

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

Cheers!!

2 Likes

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

It takes me here:

Thank you!