How to ädd a before and after image effect on hover

Store Design
, , ,

Topic summary

Goal: Implement a before/after image effect that reveals the change on hover (no click), with “Before” on the left and “After” on the right, and a smooth transition that follows mouse movement on product pages.

Context: The requester provided a visual mockup and referenced an example implementation on another store, plus their own store URL for context. These visuals/links are central to understanding the desired UX.

Response so far: A community member shared a YouTube tutorial that involves adding code, but it appears to rely on a click/drag slider with a center handle/arrows.

Clarification: The requester explicitly does not want a click interaction or visible arrows/handle—only a hover-driven reveal.

Status: No working solution or code snippet meeting the hover-only requirement has been provided yet. The thread remains open; the key open need is guidance (CSS/JS) for a pure hover + mouse-move before/after effect without a slider handle or arrows.

Summarized with AI on December 12. AI used: gpt-5.
1

Hey guys, I’m looking to add a “before and after” image effect on hover to my store.

I want it to work without clicking—just hover and move the mouse to see the change.

I’d like it to look something like this:

CreatorTim_0-1734637474833.png
CreatorTim_0-1734637474833.png1920×922 170 KB

On the left, it says “Before,” and on the right, “After.” When hovering, it seamlessly transitions as the mouse moves.

Here’s the store showing how I’d like it to look: https://tomnoske.store/products/cinema-luts (just scroll down a bit, to see it)

And here’s my store URL: https://1049xn-ya.myshopify.com/

I’d appreciate any help,
Thanks so much!
Tim

2

Hello, @CreatorTim .. Hope you are doing well, I’m sharing video, before and after steps need some code so this video will be helpful for you.
You can watch this, and let ne know if you will done

Thanks!

If you find my advice helpful please remember to LIKE and accept as SOLUTION.

3

Hey, yes, I’ve seen that, but I would like it to work only on hover, not on click. Also, I wouldn’t want the arrows in the middle. They don’t look good.