In Part 1 of this tutorial I recreated the easier animated background on the Costomise website. This time I’ll be tackling the slightly more involved animation on, the green one that has three animated circles.
Preview
Before I get into the detail of this second background animation, 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 H2 heading, body text and Font Awesome icon.
Unlike part 1, you can see that I’ve added an additional span to the text module. This will be used to add two of the circles of the background animation. The span needs to have a CSS class of animation_background.
3. Add a CSS class to the text module
In order to get the background effect I’m going to use the text module to show the circle effects.
Open the text module settings and go to the Advanced tab and open the CSS ID & Classes toggle. Copy and paste or write animated-background into the CSS Class input field.
Copy the text module into the other columns in the row.
4. Add the CSS
To create the first animated circle, I’m going to use the text module’s Before pseudo element, using the CSS class we added to the text module 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 Text module Before pseudo element styling
Add the circle animation to the Before pseudo element using the following CSS:
.animated-background:before {
content: '';
width: 273px;
height: 273px;
background-color: #06df9e;
border-radius: 50%;
position: absolute;
top: -148px;
left: -83px;
transform: scale(0);
}This will do the following:
- Absolutely position the pseudo element outside the top left of the main element
- Set it so that the pseudo element has a fixed width and height
- Set the border radius to make a circle
- Change the z-index of the pseudo element so that it sits beneath the main element’s content
- Set the background colour (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 the circle grow on hover using the following CSS:
.animated-background:hover::before {
transform: scale(1);
transition: all 0.5s linear;
transition-delay: 0.1s;
z-index:-1;
}This will do the following:
- Transform the element’s size up to 100% over 0.5 seconds, with a small delay before this happens
- Set the z-index to -1 so that it sits beneath the main element’s contents
Next we’re going to set the Font Awesome icon’s colour using the following CSS:
.animated-background i {
color: #06df9e;
}
.animated-background:hover i {
color: #ffffff;
}
4.2 Text module main element styling
We’re now going to add some styling to the main element of the text module so that it replicates the look on the Costomise website using the following CSS:
.animated-background {
background: #ffffff;
border: 1px solid #e9e9e9;
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 5;
padding: 55px 30px 25px 40px;
margin-top: 45px;
color: #1e2149;
}This will do the following:
- Set the colour, background colour (you can change this to match the colour/design of your site), border, padding and top margin
- Set the z-index to 5 to ensure it remains on top during the animation
- Set the overflow to be hidden, ensuring the circles won’t be seen until they appear on the text module
- Set the position to relative, ensuring other content will not be adjusted to fit into any gap left by the element
One last thing we need to do to the main element of the text module is to set the border, background colour and the content colour when the column is hovered using the following CSS:
.animated-background:hover {
background-color: #06df9e;
border: 1px solid #06df9e;
color: #ffffff !important;
}4.3 Span Before pseudo element styling
Next we’ll add the second circle animation to the Before pseudo element of the span using the following CSS:
.animated-background .animation__background:before {
content: '';
width: 450px;
height: 450px;
background-color: #6fefc8;
border-radius: 50%;
position: absolute;
top: -250px;
left: -180px;
z-index: -2;
transform: translate(-50%, -50%);
opacity: 0;
}This will do the following:
- Absolutely position the pseudo element outside the top left of the main element
- Set it so that the pseudo element has a fixed width and height
- Set the border radius to make a circle
- Change the z-index of the pseudo element so that it sits beneath the main element’s content
- Set the background colour (you can change this to match the colour/design of your site)
- Set the element’s initial transform position to be 50% left and 50% up
One last thing we need to do second circle is make it visible and grow when the text module is hovered using the following CSS:
.animated-background:hover .animation__background:before {
opacity: 1;
transform: translate(0%, 0%);
transition: all 0.9s linear;
}This will do the following:
- Set the opacity to 1 so that the element is visible
- Transform the element’s position back to its original position over 0.9 seconds
- Set the z-index to -2 so that it sits beneath the main element’s contents and also the first circle
4.4 Span After pseudo element styling
The final piece to the puzzle is to add the third circle animation to the After pseudo element of the span using the following CSS:
.animated-background .animation__background:after {
content: '';
width: 550px;
height: 550px;
background-color: #41efba;
border-radius: 50%;
position: absolute;
top: -195px;
left: -180px;
z-index: -3;
transform: translate(-50%, -50%);
opacity: 0;
}This will do the following:
- Absolutely position the pseudo element outside the top left of the main element
- Set it so that the pseudo element has a fixed width and height
- Set the border radius to make a circle
- Change the z-index of the pseudo element so that it sits beneath the main element’s content
- Set the background colour (you can change this to match the colour/design of your site)
- Set the element’s initial transform position to be 50% left and 50% up
One last thing we need to do third circle is make it visible and grow when the text module is hovered using the following CSS:
.animated-background:hover .animation__background:after {
opacity: 1;
transform: translate(0%, 0%);
transition: all 1.3s linear;
}This will do the following:
- Set the opacity to 1 so that the element is visible
- Transform the element’s position back to its original position over 1.3 seconds
- Set the z-index to -3 so that it sits beneath the main element’s contents and also the first and second circles
And We’re Done
A slightly more complicated animation compared to part 1, but using three circles, each with a different transform time and z-index, makes for an interesting background effect.
