Streaming live at 10am (PST)

How to create a lightbox hover?


I have seen the tutorial and i hope to make a lightbox hover with text just like this
However, the tutorial did not show the method .Does anyone know how to do it ?

Can you add text hover over an image/video when it is inside lightbox links
Creating a color overlay over an image on hover
My Webflow code and elements database
Unable to create new site

here are two articles to help you with an image and video lightboxes:

hope this helps smile


Hi @Cheung, in addition to the fine info from @PixelGeek on how to create a lightbox, I have created a small tutorial to show how to create the overlay for text:

I hope this helps smile

p.s. I have created the example as a public site that you can clone, to see how it works in your design view and you can play around with it smile


Helped a lot blushreally clear instrution heart_eyes big big thank you to you.


Question.. I recently did something similar on this website but instead of adding interactions I made the hidden div class "effects" at 0% and then on the hover state changed it to 100%. It's faster but I dont know if it's in best practices. Is there any reason to use interactions vs this way?


I use the hover state as well and usually more than the actual interactions options when doing overlay things that not containing any x or y movement. So you should be fine using that too.


@Chris_Grover, thanks for the question... there are probably different shortcuts that can be used to get the effect you want smile The method I gave was just one example, if you can get the result you want using the hover, then go for it ! smile

I like to use multi-step interactions, with a step at each style change, because they are easier for me at least to troubleshoot down the road smile That and if I have an interaction with a lot of common steps, I can then duplicate those interactions to work on other elements and not have to make so many settings changes, just update the relevant steps smile

Cheers, Dave


@cyberdave thanks for this. If I want to link to another page how would I do that? I looked around but there's not really clear answer.


Hello @Ga_l, thanks for the question, sorry, but do you mean, link to a lightbox on another page?



I moved a post to a new topic: DIV Hover Overlay with Links