Does your product or service offer transformations for your clients? From home styling, renovation and events companies, to web design and re-branding projects — having interactive visuals that show off your previous transformations can inspire your new clients to think about the changes you can make for them.

This feature works with your clients hovering or clicking on the image, which will reveal a second image — this interactivity is such a simple way to really show off and sell the value of your work to your prospective clients.

Everyone loves a good before and after transformation!

Before/After Demo

Hover over the image below with your cursor to view the before and after transformation:

Build the Layout

In your Dubsado form, drag in a Column Block. Each column will contain one image, so select the number of columns depending on how many transformations you'd like to display.

For one before / after image, we'll need to change it to One Column. Untick Show Title → Close.

For a grid of 2 x 2 (total 4 images), we'll need to change it to Two Columns, and drag in another Columns Block with Two Columns. For each Column Block, make sure to untick Show Title.

Code Block

Add in a Code Block into the first column and replace with the following code:

<div class="before-after" id="beforeAfter1">
</div>
<style>
.before-after {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 10px 0px;
    height: 300px; 
    -webkit-transition: all .3s linear; 
    -o-transition: all .3s linear; 
    transition: all .3s linear;
}

/* image 01 - before */
#beforeAfter1 {
    background-image: url(https://searchandgrow.com/before-imageurl.jpg);
}

/* image 01 - after */
#beforeAfter1:active, #beforeAfter1:hover {
    background-image: url(https://searchandgrow.com/after-imageurl.jpg);
}
</style>

See where the URL is?

Replace the image URLs (on the highlighted lines) with your own background images. These can be any sized—don't worry about the cropping or anything else, this code will automatically scale your image to fit.

Stuck on getting your image URLs? See here for more info.

Additional Images

For each additional image, drag in a Code Block and replace with the following:

<div class="before-after" id="beforeAfter2">
</div>
<style>
#beforeAfter2 {
background-image: url(https://searchandgrow.com/before-imageurl.jpg);
}
#beforeAfter2:active, #beforeAfter2:hover {
background-image: url(https://searchandgrow.com/after-imageurl.jpg) !important;
}
</style>

And then update your image URLs.

You'll also need to update the number on the 3 highlighted lines (beforeAfter2)

If you look closer at the code, you'll notice that it's almost the exact same code as before but with a section missing and more importantly, the numbers have updated to 2 in the highlighted lines.

Now for each additional image, we'll need to update that number. It's important that each before/after image gallery has a unique number (so that the code knows which one to target).

Customisations

Change Heights

If you need to adjust the height of the images, take a look at this line and adjust the height as necessary:

<div class="before-after" id="beforeAfter1">
</div>
<style>
.before-after {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 10px 0px;
    height: 300px; 
}
/* image 01 - before */
#beforeAfter1 {
background-image: url(https://searchandgrow.com/before-imageurl.jpg);
}
/* image 01 - after */
#beforeAfter1:active, #beforeAfter1:hover {
background-image: url(https://searchandgrow.com/after-imageurl.jpg) !important;
}
</style>