How to create hover preview effect on lightbox

Hi,

I’m wondering how to create layer image on top of a lightbox or another image and do a hover preview effect so that when you hover over an image, you’ll see another image underneath?
Link to example here: Webflow - @tycreated | Creative Freelancer Template (see under Selected Works).
Also, how does one leave the text on both images as shown in the link (date and type of work).

TIA!


Here is my public share link: LINK
(how to access public share link)

Hi SL welcome to the community.

The great thing about readonly links is that you can see all of the design details of the project, and exactly how most effects are applied.

When you see cool effects like that, they are usually Webflow interactions.
In this case, they’re on the Project image item, which you can select in the left side navigation, and then click the lightning bolt to view Interactions in the top right.

image

image

There you can click in to each of the Interactions to learn how they work, and how to reproduce them in your own work.

It’s basically the same situation for your second question, though interactions are not used here. You can click on the left side into the Project card, and see how it’s styled and positioned relative to its parent Project image element. Look at the settings to see how the elements are arranged and styled, and how the text contents are arranged too.

image

image

All the details you want are there, far better than anyone here could explain.