How to Show a Second Image on Hover/Click (Before/After)

This is a great feature for showing off your work—having interactive visuals can inspire clients to think about the transformation that you could do for them!

01

Drag in a Column Block and select how you'd like to display your images — single (one column) or in a grid (2+ columns).

Untick Show TitleClose.

02

Add in a Code Block where-ever you want your first image to be, 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; 
}
/* image 01 - before */
#beforeAfter1 {
background-image: url(https://staging.searchandgrow.com/before-imageurl.jpg);
}
/* image 01 - after */
#beforeAfter1:active, #beforeAfter1:hover {
background-image: url(https://staging.searchandgrow.com/after-imageurl.jpg) !important;
}
</style>

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.

03

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://staging.searchandgrow.com/before-imageurl.jpg);
}
#beforeAfter2:active, #beforeAfter2:hover {
background-image: url(https://staging.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).

04

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://staging.searchandgrow.com/before-imageurl.jpg);
}
/* image 01 - after */
#beforeAfter1:active, #beforeAfter1:hover {
background-image: url(https://staging.searchandgrow.com/after-imageurl.jpg) !important;
}
</style>
© 2020 SEARCH & GROW
|
PRIVACY POLICY
|
Terms of use
|
DESIGNED BY ME ♦
Top linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram