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 ?

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

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?


split this topic #10

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

closed #11