Streaming live at 10am (PST)

How to create a lightbox hover?


#1

I have seen the tutorial and i hope to make a lightbox hover with text just like this http://help.webflow.com/lightbox-overview
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
#2

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

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

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

hope this helps smile


#3

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 https://webflow.com/website/example-lightbox-hover


#4

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


#5

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?


#6

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.


#7

@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


#8

@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.


#9

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

Cheers,
Dave


#10

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


#11