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

Using CSS Grid In Bricks Builder (part 1)

In our multi-part part Bricks Builder Tutorial about CSS Grid, we will deep dive into all relevant aspects of CSS Grid in Bricks builder and by the…
Read More

4 Custom Code Snippets For WordPress

When building a website and the customer needs a bit of custom functionality added to it, most designers look for a plugin to assist in this process.…
Read More

A Webmasters Guide to Integrating SEO With Web Design

Bringing SEO and SERP optimization into line with a quality interface is the Holy Grail of web design. This means that your website shouldn’t only look fantastic…
Read More