CSS Animations in Divi: Zooming In Image

What can you do with a hero section that just seems a bit too... static?
Barbora Růžičková • Web Designer •
Barbora Růžičková • Web Design
💬 Share
✏️ 06. 11. 2024 • Updated 06. 11. 2024
✏️ 06. 11. 2024 • Updated 06. 11. 2024
✏️ 06. 11. 2024
Updated 06. 11. 2024
Barbora Růžičková • Web Designer
website development
wordpress
Woman looking at computer screen with animation

What can you do with a hero section that just seems a bit too… static? Or what if your client feels their website could benefit from some ‘movement’?

Before you take the video shortcut (which comes with a significant cost in terms of website performance), try animating the image in your hero section with CSS animations. I promise you won’t regret it!

Zooming In on a Background Image (DIVI)

I created the following tutorial for a community of website devs who work with the DIVI WordPress website builder. It introduces one specific animation and its implementation in DIVI – however, CSS animations are very generic and can be used just about anywhere.

1. Section

Open your page in the DIVI builder and create a new section. Open the Settings tab, go to Advanced > Custom CSS and insert the following code:

selector { overflow: hidden; }

This code snippet tells the browser to hide everything outside this particular section’s boundaries (such as the edges of an image that’s being enlarged). Don’t forget this step – you risk getting ugly horizontal scrollbars as the growing image increases the website width.

Create two rows in the section.

2. Row 1

Add an image to the first row’s background. Set the height to 100vh and width to 100%. Set the margin and padding to 0, so the image will cover the entire screen, side to side.

Go to Advanced > Custom CSS and insert the following code:

selector {
animation: zoom-in-zoom-out 20s ease infinite;
}

You can call the animation whatever you like (here I’ve gone with “zoom-in-zoom-out”). “20s” (20 seconds) is the time it will take the animation to run from start to finish. “Ease” smoothes the animation out a little. And “infinite” means that the animation will run an infinite number of times. You can replace the word with a number for a set amount of runs.

3. Row 2

Make the row’s position absolute: Advanced > Position > Absolute.

Insert whatever you want to display on top of the background image. The heading, a text block, a button…

4. CSS Code

Go to the Custom CSS editor: Divi > Theme Options > Custom CSS. Insert the following code block:

@keyframes zoom-in-zoom-out {
  0% {
   transform: scale(1, 1);
  }
  50% {
   transform: scale(1.3, 1.3);
  }
  100% {
   transform: scale(1, 1);
  }

The name of the animation (“zoom-in-zoom-out” in this case) MUST be the same as in step 2.

This code snippet tells the browser what the animation called zoom-in-zoom-out does. At the beginning of the animation loop (at 0 %), the element we have added the animation to (a row with a background image in our case) will remain unchanged (scale(1, 1); the numbers are for width and height). In the middle of the animation loop (at 50 %), the element’s width and height will be 1.3x larger. At the end of the animation (100%), the size will go back to the original dimensions.

Within the animation loop, the transformations are quite smooth. Make sure the element has the same size at the beginning and end of the loop, though. If, for instance, you ended the loop with scale(1.4,1.4), the image would smoothly grow until it’s 1.4x its original size, and then instantly jump back to the original (scale 1,1). You probably don’t want that.

Zoom In on Hover (DIVI)

You can use the same animation as a hover effect.

1. Create the following setup: Section > Row > Image. The image must fill the entire row (height and width will be 100 %). If the image looks skewed, go to Advanced > Custom CSS and insert the following code:

selector img { object-fit: cover; }

2. Set the row’s padding to 0. Then go to Advanced > Custom CSS and insert the following:

selector { overflow: hidden; }

3. Open the image element’s settings again. Go to Design > Transform > Hover. Set the size to 130 % (or any other number over 100).

Voila! Move your mouse over the image to see the effect.

Usage Examples

Here are links to two projects where I have used this particular CSS animation in the hero section (one built with DIVI, the other with Bricks). In the case of this IT company website, the client had originally wanted to use a stock video – this was my proposed alternative. And in this design-build studio website project, the client really, really wanted the website to appear ‘in motion’ as much as possible. So there are a lot of animations 🙂 .

Good luck animating!