Slow Zoom Effect for Slides in Bricks

This Pro tutorial provides the steps to set up a slow zoom effect for slides of nestable slider element in Bricks.

Step 1

Add a Slider (Nestable) element inside a Section’s Container in your Bricks template/Page.

Delete Slides 2 and 3. We are going to first configure Slide 1 and duplicate it as many times as the number of needed slides.

Add a Div inside Slide 1 as its first child.

After implementing the tutorial the structure should look something like this:

Set your desired first slide image as this Div’s background image.

Add a class of slide-bg for the Div and set it like this:

Duplicate Slide 1 for additional slides.

Select each of these Slide’s Div element, click x near the top left to clear the slide-bg class as the active selector and whilst ensuring that the ID is the active selector, set the slide’s background image.

Make any other adjustments like setting a light color for the circular bullets navigation as needed.

If you’d like to copy and paste the entire Section from our test site, you can find the JSON code here.

Step 2

At Settings (gear) icon at the top → PAGE SETTINGS → CUSTOM CODE → Custom CSS, add:

.bricks-is-frontend .splide__slide.is-active .slide-bg {
	transform: scale(1.3);
	transition-duration: 20s;
}

That’s it!