Before After Image Hover Effect for Your Squarespace Website

Aug 14

Let’s build a Before / After Image Hover Effect on our Squarespace website.

Pro Web Designers
Before we get started, check out my Pro Before / After Slider plugin. The pro version allows you to use image blocks for easier installation, dozens of styling tweaks you can make, image captions, multiple sliders per page, and more.

Installing the code

Add in an image block and add your BEFORE image into it.
Paste the below CSS into your Design » Custom CSS area.
Grab the BLOCK ID of the image block you added in step 1 and replace the first line in the CSS you just added.
Upload your AFTER image into the Design » Custom CSS » Manage Custom Files area
Replace the IMAGE_URL in the CSS with the URL of your AFTER Image.

#block-ID {
  /*Adjustable Settings*/
  figure:before, 
  .fluid-image-container:before{
    content:'before';
    top:0; /*Or bottom: 0;*/
    left:0; /*Or right: 0; */
    padding:7px 17px;
    font-weight:700;
    color:white;
    text-shadow:0px 0px 3px black;
  }
  &:hover figure:before, 
  &:hover .fluid-image-container:before{
    content: 'after';
  }
  figure:after,
  .fluid-image-container:after{
    background-image: url(IMAGE_URL_HERE);
  }

  /*Don't change below here*/
  figure:before,
  .fluid-image-container:before{
    content:'before';
    position:absolute;
    z-index:1;
    bottom:0;
    right:0;
  }
  figure:after,
  .fluid-image-container:after{
    content: '';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size:cover;
    opacity:0;
    transition: opacity .3s ease;
  }
  &:hover figure:after,
  &:hover .fluid-image-container:after{
    opacity:1;
  }
}

This code relies heavily on the pseudo-elements, which allow you to select things that aren’t in the HTML. In this code we’re using the :after and :before pseudo-elements to create our “before” and “after” labels for our images AND to create the “after” image itself.

Let’s

Creating the “before” and “after” labels.

We use the :before and :after pseudo-elements to create our labels.

A SIMPLE CONINCIDENCE
We use the :before and :after pseudo-elements to create our labels, but these pseduo-elements have NOTHING to do with our label text “before” and “after”.
We could relabel the text on our images to "Messy" and "Clean" and these pseudo-elements would still remain :before and :after.

These pseduo-elements allows us to insert elements onto our page through CSS and without touching the HTML. It’s very limited, but for our purposes of creating labels, this is perfect.

The following code adds in some text that is inserted as the first child element (:before) within out figureelement.

figure:before {
    content:'before';
}

Using some additional CSS, we can position this label on top of our image.

figure:before {
  content:'before';
  position:absolute;
  z-index:1;
  top:0;
  left:0;
}

Now, all we have to do is add in some CSS that will change the content property to “after” when we hover over it.

#block_id:hover figure:before {
  content:'after';
}

Creating the After Image

We use the same technique of using pseudo-elements to create our “After” image.

We can’t use the :before pseudo-element, since we’re already using that for the label, but we can use the :after pseudo-element.

To create a pseudo-element, there has to be content, but the content property can only take text, not an Image, so let’s make our content empty.

figure:after {
  content:'';
}

Now let’s add some CSS to position this pseudo-element on top of our image, but unlike our label, we’ll want this pseudo-element to encompass the entire image block.

figure:after {
  content:'';
  position:aboslute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

There are only 2 steps left:

Give this element a background image and set it to cover the element.
Only show this element on hover.

#block_id:hover figure:after {
  content:'';
  position:aboslute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image:url(IMAGE_URL.jpg);
  background-size:cover;
}

And that’s essentially it! My CSS Snippet for this code tweaks some additional elements so it’s easy to replicated this effect on different image blocks and to allow for you to transition smoothly between the before and after photos.