How to make a lightbox for an image open by clicking on a text box?

Hi all, I hope you are well.

I am looking for a way to add code so that when someone clicks on the text boxes which overlay each of my images on hover, it opens up the lightbox for the image underneath.

I have attached an screenshot of one image pre-hover and another when the cursor hovers over it for reference. I want a click anywhere in the text box to lead to the lightbox.

Hope this helps.

So you want

Initial: show image

Hover: show image, show a dark overlay, show a text

Click: open a lightbox with bigger image version

?

On 6/3/2024 at 8:41 AM, tuanphan said:

So you want

Initial: show image

Hover: show image, show a dark overlay, show a text

Click: open a lightbox with bigger image version

?

Hi, that is correct. Eventually I’d like to join up these lightboxes of single images on a page too but I know i will need a third party app at that time

On 6/20/2024 at 12:38 AM, atmos said:

Hi, that is correct. Eventually I’d like to join up these lightboxes of single images on a page too but I know i will need a third party app at that time

You mean when clicking image >> Show lightbox.

If pages has 10 images, then in lightbox, it will show 10 images (in slideshow format, so users can click to see other images within lightbox)?

2 hours ago, tuanphan said:

You mean when clicking image >> Show lightbox.

If pages has 10 images, then in lightbox, it will show 10 images (in slideshow format, so users can click to see other images within lightbox)?

 

Yes that is correct. They are not in a gallery though and are separately placed images as it gives me more control on the presentation/layout.