Lightbox with text overlay question

Design help General
1

I’m trying to create a Lightbox with text overtop of the Lightbox, but the area where the text is stops the cursor from being able to click on the Lightbox, which is no good.

How can I make the text appear on top of the image without getting in the way of the clickable area for the Lightbox Link?

I’ve been messing with z-indexes on all the elements but can’t get it to work.

Thanks.

Example:

27%20AM
27%20AM1054×756 372 KB

1 Like
2

Hey @oceansurf

Can you share your read-only link?

Piter :webflow_heart:

3

Hi @oceansurf,

Since the text is inside the lightbox element, and every click in that element will open the lightbox, i would simply make the text element with custom cursor : pointer
26

4

Hi Avivtech,

The text is actually appearing on top of the Lightbox and prohibiting clicks, which is what I’m trying to correct. So if I make the cursor into a hand / pointer it still won’t click if the mouse is over the text. Unless I’m misunderstanding what you’re saying. Thanks.

I will share my public link in a few moments, @PeterDimitrov, thanks.

5

Then put the text inside the lightbox element :slight_smile:

1 Like
6

Here’s what @avivtech means > https://www.useloom.com/share/5da11c16e3964190b443fff6f05f2742

7

Oh, of course! Thank you. It seems you are a Wizard, sir, lol.

Is there a better way to do this than what I did? I’m new to Webflow, obviously…

And the text doesn’t want to go to Opacity zero when the page first loads. Thought I set the Text Block to 0 Opacity? (appears when the animation runs)

Also, is the animation smooth enough (when you mouse over the Music Video Reel Lightbox)? Is there a better way to put that animation together, you think? Mouseover the Lightbox Link and the text moves in and become visible. I just stacked the animations on the Lightbox Link element…

Here’s my public link:
https://preview.webflow.com/preview/mikes-site-9cf787?utm_source=mikes-site-9cf787&preview=72f81d4ff862ac883662cdb25c4e1f6a

Thanks!

1 Like
8

To fix the initial state you need to remove the initial state settings from the hover out interaction.

9

Thanks! That fixed the initial Opacity problem of the text.

10

Now I’m back to the text disappearing (going behind the image) if I try to add the “BW to Colour and move” interaction to the Lightbox Link to move and colorize the image a bit. How can I apply that interaction without the text disappearing? (I also add an Overflow:hidden to the parent Div so the image moves a bit but is clipped by the Div)

11

Nm, I figured it out. Thanks again.