Mirrored Logo On Top Of Slider

[Clms 2 Likes (Newbie)]

Hello,

I am trying to think about a possibility on how to put a logo on top of a photo.

The logo should be "filled" with the photo but vertically mirrored.

 

If it was a static photo, I would put an SVG on top of the image and fill it with the mirrored version of the background photo.

 

In my case the background image is not static, it is a slider - so the image changes automatically.

I now want the logo on top always shows the vertically mirrored version of what is currently behind the logo. Kind of like "glass".

 

No matter what, I could not find a solution in my head.
Any idea on how to tackle this issue?

Attached you will find an exmaple on how I imagine the look.

 

Thanks a lot!

 

[PointC 8,599 Likes (Superhero)]

Are you asking if there is a GSAP plugin to help with that? If so, the answer is no. 

 

I'd probably clone the image, scale it to -1 and use a mask or clip-path to only show the heart shaped section. If you put together a demo we're happy to help with the GSAP related parts of your project.

 

Happy tweening.

 

[Clms 2 Likes (Newbie)]

Thanks a lot!
I thought there might be a plugin for that.

This solution is what I have had in mind as well, but how would it work with a slideshow?

That's my issue - I only can do it for a static object, not something that changes/moves in the background?

 

Thanks so much!

[PointC 8,599 Likes (Superhero)]

It would just be a matter of moving the reflected image an equal amount in the opposite direction. Here's a basic example.

 

See the Pen eXQRbz by PointC (@PointC) on CodePen

 

Maybe that'll give you some ideas. Happy tweening.

[Clms 2 Likes (Newbie)]

Ah, so easy. Thanks for your input, I think I can solve the problem now