Mirror Effect

Mirror effect as seen around the Web lately, i.e. on Corentin Fardeau’s and Method’s website. The idea is to mirror an image and animate it within the context of a slideshow.

By in Playground on
Demo Code

Today we’d like to share a little effect with you that you might have already stumbled upon on the Web. It’s a kind of a mirror effect as seen on sites like Corentin Fardeau and Method. They are really interesting and gorgeous looking effects, check them out:

mirroreffect_method

mirroreffect_fardeau

The idea is to mirror an image within the context of a slideshow or just as decoration. For showcasing this, we’re using a slideshow with three simple examples, each one showing a possibility of the effect.

Attention: Modern browsers only, since we are using vieport units, blend modes and 3D transforms.

In the first demo we don’t separate the mirror images completely, in the second one we show a vertical example, and in the last one we play with a blend mode and separate the two sides visually. The last example also has a bit of movement, just move around with your mouse to see the effect.

mirroreffect_01

mirroreffect_02

mirroreffect_03

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

Check out the code examples in the download package to see how you can create your own effects.

References and Credits

We hope you like the effect and find the examples useful!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Large Image to Content Page Transition

Shape Slideshow with Clip-path

A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view()

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 10

Comments are closed.

  1. Mary Lou, incredible inspiration as usual. You are a true credit to the design and code profesion. Thank you. I have used so many of your design ideas on my tribute websites.

    One question on this idea, in demo 2 is the Play button functional for anything specific or is it there to inspire SVG ideas?

    Again, Thank you for all your hard work and inspiration.

    Steve

  2. Now a days mirror effect is getting good height in the field of designing. It actually helps you to make the design more attractive.

  5. Hi Mary
    I am amazed by your work 🙂 [really wonder how you do it]
    I will be very glad to contact you because as a student, I need a good model to guide me and become like you.
    Best

  6. Wow. This is powerful Mary. Thanks for the source code. It’s a pity this doesnt work in older browsers.

  8. This is pretty awesome. Would you know of the example of this slider with implemented “swipe” option to use on touch devices?