How To Properly Create Image Cards in Bricks Builder

written by: Dimitri
Last Updated: November 18, 2021

In this tutorial, we are going to show you how you properly create image cards in Bricks Builder. This concept applies far beyond the scope of just image cards and can be used for background images, call to actions, and much more.

How To Build It

It is a rather simple process to make these image cards, the only issue is that Bricks adds a few extra wrappers that we need to manipulate to suit our needs. Once you get the hang of it, you can begin to apply it to everything and utilize all the benefits of using an image instead of a background image. Here is the basic structure:

Bricks Builder structure for image cards

Wrapper Element

To get started we simply created a section and an inner grid with 3 columns. Inside each column, we insert a div (or a container). Add a class of .image-box_wrapper and set the width to 100% and add the following code to the CSS. You can change the height to whatever you want.

Bricks builder creating an image card layout settings
root{
height: 45rem;
}

Image Element

Then we add an image inside the container, add the class .image-box_image and make both the width & height to 100% and add the following code inside the CSS code editor.

root{
height: 100%;
transition: .3s transform ease-in-out;
}

The transition is used later in the tutorial for when we add hover effects, but for simplicity just add it now.

Gradient Overlay

Next, you'll add another div add the class .image-box_overlay, set the position to absolute with a top, bottom, left, and right to 0 and a z-index of 1.

Now navigate to the gradient/overlay tab pick your colors and set the "Apply To" to the background.

Content Wrapper

Add another div inside the parent, not the overlay div. Set its position to absolute with a bottom of 5% and padding on the left & right with 5%

root{
transition: .3s transform ease-in-out;
}

Additional CSS

Because of the way that Bricks loads the content on the front-end, additional divs are added. We need to add additional CSS to ensure that all the components work properly. If you followed along and added the same classes stated in each step you can copy & paste this into a code block and everything should work perfectly.

<style>
.image-box_image {
  height: 100%;
}

.image-box_image > .image-wrapper {
  height: 100%;
}

.image-box_image > .image-wrapper > img {
  object-fit: cover;
}

.bricks-element-inner > .image-wrapper > img {
  object-fit: cover;
}

.bricks-element-inner {
  height: 100%;
}

.bricks-element-inner > .image-wrapper {
  height: 100%;
}

.image-box_wrapper {
  overflow: hidden;
}

.image-box_wrapper:hover .image-box_image {
  transform: scale(1.1);
}

.image-box_wrapper:hover .image-box_content {
  transform: translateY(-25%);
}
</style>

Leave a Reply

Your email address will not be published. Required fields are marked *

our blog.

Related Blogs You May Enjoy

Nifty CSS Hover Animations

For this blog post, we will show you how to add even more CSS hover animations for links and/or menu items. If you want to see the…
Read More

The Importance of A Website in Las Vegas Part 1

Why Does Your Business Needs a Website? We encounter many different customers that always ask "Why do I need a website? My business already has customers." Our…
Read More

Expired Domain Scam

Today we received a contact form fill out with the following message: Notice#: 491343 Date: 2021-01-21 YOUR IMMEDIATE ATTENTION TO THIS MESSAGE IS ABSOLUTELY NECESSARY! YOUR DOMAIN…
Read More