Streaming live at 10am (PST)

Image Overlay on Lightbox Thumb


#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;

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? http://help.webflow.com/general/guidelines#how-do-i-share-my-sites-read-only-link

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

  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


#8

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

Thanks!!


#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


#11

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

Cheers!!


#12

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

It takes me here:

Thank you!


#13