Interaction - Reveal on Hover (with optional slider control)

Hi!

I’d like to create a reveal-on-hover interaction like the one about halfway down this page: http://photoshopdesire.com/how-to-create-stylized-typographic-portrait-text-effect-in-photoshop/

I’ve scoured the web and found some information in tutorials, but either the UI is outdated or the effect isn’t quite what I’m looking for.

Right now, I have my two images side-by-side, and I plan on positioning them one on top of the other after I get the reveal working correctly. I’d like the graphic to be the default, and the photo to be revealed on hover.

Ideally, I’d like to include the slider at the bottom, but that’s not my main priority.

I’m thinking I need to use the Element Trigger “Mouse move over element,” but I’m not sure how. Can anyone provide some advice on how to proceed?

Much appreciated!

Here is my public share link: Webflow - tinamkister 07/25/19
(how to access public share link)

Hi tkister,
I saw this project by EliShmerler that might be what you are looking for or provide some guidance.
On the Section you can see a Mouse move over element interaction.
https://webflow.com/website/Before-and-After-effect

Hope this helps!

Wow! That’s gorgeous! I’ll check it out. Thank you! :slightly_smiling_face:

I was able to clone the project, copy the interaction into my project, and substitute my images for the images in the original. Unfortunately, there is a parallax effect on the interaction that I can’t seem to get rid of. I don’t even see it in the Interactions panel.

I’ve read through this page, checking each setting, but the interaction isn’t there:

Any suggestions?

Hello Tikster.

I took the liberty of stepping in and creating the animation you’re going after. Here’s the final result:

https://jean-augustos-sublime-project.webflow.io/help-tkister

Here’s the read-only:https://preview.webflow.com/preview/jean-augustos-sublime-project?utm_medium=preview_link&utm_source=designer&utm_content=jean-augustos-sublime-project&preview=f815bf95c4a9267ab758c446b9fe1bb6&pageId=5d3470fa47f4bb777999c13f&mode=preview

1 Like

@Jeandcc Awesome! Thanks so much! :smiley:

(Unfortunately, it will be a little while before I can use this, because Webflow keeps crashing and misbehaving, and I need to get that resolved first. When things get sorted out, I will take a closer look.)

1 Like

No problem. Feel free to get in touch any time