How to create a lightbox hover?

Design help Animations & Interactions
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 ?

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 :slight_smile:

1 Like
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 :slight_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 :slight_smile: example-lightbox-hover - Webflow

10 Likes
4

Helped a lot :blush:really clear instrution :heart_eyes: big big thank you to you.

1 Like
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 :slight_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 :slight_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

1 Like