On one of the Divi Facebook groups I’m a member of someone asked a question about animated backgrounds on the Costomise website. If you visit the site and mouse over the different card boxes, you’ll see some really nice looking background animations.
The Costomise website is a Bootstrap website created using Mobirise, so not a Divi-based site, but I thought it would interesting to try and recreate the effects using the Divi builder and some custom CSS, which is what I’ll cover in this tutorial.
Preview
I’ll start by looking at the easier of the two background animations, which is actually the second one on the Costomise site. But before I get into the detail, here’s a preview of what the effect will look like once I’m done:
Recreating the Animation
1. Create a new row
Start by creating a new row. It doesn’t matter how many columns you use, but for this tutorial I’ve chosen to use three columns.
2. Add a text module
Add a text module to the first column, add your content, and style the content how you want it to look. I’ve added some styles to the H4 heading and the body text.
Copy the text module into the other columns in the row.
3. Add a CSS class to the columns
In order to get the background effect I’m going to use the columns to show gradient and the circle effect.
Open the row settings and then select the settings for column 1.
Repeat the above for the other columns so that they all have the same CSS class.
4. Add the CSS
To create the gradient and the animated circle, I’m going to use the column’s Before and After pseudo elements, respectively, using the CSS class ID we added to the columns in step 3 above.
If you are using a child theme, place the CSS into the style.css file. If you’re not using a child theme, place the CSS in the Divi Theme Options Custom CSS code box.
4.1 Before pseudo element styling
First we’re going to add the gradient to the Before pseudo element using the following CSS:
.gradient-background::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
z-index: -1;
background-image: linear-gradient(130deg,rgba(255,58,70,.65) 0%,rgba(255,0,126,.65) 100%);
transition: all 0.3s ease-in-out;
}This will do the following:
- Absolutely position the pseudo element at the top left of the main element
- Set it so that the pseudo element covers the entire main element (width and height 100%)
- Set the pseudo element’s initial opacity to 0, i.e. it isn’t visible
- Change the z-index of the pseudo element so that it sits beneath the main element’s content
- Set the gradient background (you can change this to match the colour/design of your site)
- Set the transition type and length
Next we’re going to make the gradient visible on hover using the following CSS:
.gradient-background:hover::before {
opacity: 1;
}4.2 Main element styling
We’re now going to add some styling to the main element of the column so that it replicates the look on the Costomise website using the following CSS:
.gradient-background {
background: #ffffff;
margin: 40px 0;
border-radius: 10px;
overflow: hidden;
padding: 60px 30px 55px 40px;
position: relative;
z-index: 10;
box-shadow: 0px 30px 70px 0px rgba(223, 227, 234, 0.5);
transition: background 0.5s ease-in-out 0s;
}This will do the following:
- Set the background colour
- Set the column margins and padding
- Add a border radius and box shadow
- Hide any overflows
- Set the z-index so that the contents is above the pseudo elements
- Set the transition type and length
One last thing we need to do to the main element of the column is to force the content colour to be white when the column is hovered using the following CSS:
.gradient-background:hover {
color: #ffffff !important;
}4.3 After pseudo element styling
The final piece to the puzzle is to add the circle animation to the After pseudo element using the following CSS:
.gradient-background::after {
content: '';
position: absolute;
background: rgba(255, 255, 255, 0.15);
width: 200px;
height: 200px;
border-radius: 50%;
top: -80px;
right: -80px;
opacity: 0;
z-index: -1;
transform: scale(0.2);
transition: all 0.3s ease-in-out;
transition-duration: 1s;
}This will do the following:
- Absolutely position the pseudo element outside the top right of the main element
- Set it so that the pseudo element has a fixed width and height (you can change this to make the circle bigger or smaller), with a 50% border radius to make it a circle
- Set the pseudo element’s initial opacity to 0, i.e. it isn’t visible
- Change the z-index of the pseudo element so that it sits beneath the main element’s content
- Set the scale of the element to be 0.2 so that it starts from this size before the animation
- Set the transition type and length
Next we’re going to make the circle grow and be visible on hover using the following CSS:
.gradient-background:hover::after {
opacity: 1;
transform: scale(1);
}And We’re Done
All in all it wasn’t too complicated to create the animated background with a simple text module and some not-too-complicated CSS.
In part 2 I’ll be covering the slightly more complicated background animation on the Costomise website, so if you’re interested in seeing how that can be put together check back soon.
