White Arrow icon
Back to all Elements

Before / After effect

A Before / After effect for photos, without any code. Only Webflow's interaction.

Because no code is involved, the 2 important things for this to work are:

  1. Structure / Hierarchy
  2. Precise Interaction

The Structure:

The "before image" (the one we place at the back) can be an image element or a background image of any DIV (.back-img-wrap)

The "after image" is a bit more complex. We need to make sure:

  1. The image is placed inside a div with a fixed width eg. 800px and height:100% (.fixed-width-div)
  2. We will place the fixed width div inside another div with no width, but with overflow:hidden (.overflow-hidden-div)

The 2 images wrappers needs to fit one on top of the other in the same div, so we will give both (.back-img-wrap & .overflow-hidden-div) position:absolute and the div that wraps all together (.ba-wrap) needs any kind of position other than static (so its direct children divs will conform to its position).

A nice extra could be an icon to indicate the left/right movement. Position it in the center of the wrapping div.

The Interaction:

Now comes the interaction... which we apply to the wrapping div, so it is our 'trigger'.
We will use 'While mouse move over element' and add actions only on the X axis.

  1. The .overflow-hidden-div size will start with width:0% and end with width:100%
  2. And the .move-icon will start with minus {-X/2} and end with {X/2} on the X axis (where X is the width of our wrapping div).

    In my case the wrapping div is 800, so-
    start: -400px
    end: 400px

    * I also added -50% on the Y axis because of the way I centered the icon element in the middle of the wrapping div.

Thats should do it :)
Clone away and play with it, for a better understand of what's goin' on...



browser mockup
Heart icon

#StayTheFuckHome. Wash Hands. Wear gloves & mask if you have to leave home.

Might also interest you:

Symbol in RichText


Insert a symbol element into a RichText. On a static or dynamic page.

Read more
Blue arrow iconWhite Arrow icon

Round Scroll Indicator / Progress Bar


A round scroll indicator mad with Webflow elements and interactions

Read more
Blue arrow iconWhite Arrow icon

Pass Parameters


Pass input fields parameters and add them to the destination URL.

Read more
Blue arrow iconWhite Arrow icon