Dec 25, 2020
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...




Destin's Youtube channel Smarter Every Day is one of my favourite places on the web.

Might also interest you:

3d Video Slider (swiper.js)


A 3d slider with video items, plays and pauses on click & slide change.

Read more
White Arrow icon



A clonable for creating an Alphabetical glossary

Read more
White Arrow icon

Dynamic Height


A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.

Read more
White Arrow icon