Categories: Divi Tutorials

Animated Backgrounds Using CSS – Part 2

Animated Backgrounds Using CSS – Part 2

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.

Background 1 add row

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.

Background 1 add text module

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.

Background 1 column 1 class name

Copy the text module into the other columns in the row.

Background 1 add text modules

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.