Hover Card design in Bricks Builder

| July 23, 2022 (Updated November 2, 2022)

In this tutorial we will make a card design with hover effect in Bricks Builder. We will make a static card with some demo content and in next tutorial, we will take a look how to use this card for our blog posts dynamically. Below you can see the example of how card will look at default state (on left) and how will look when we hover over it (on right)

Default state
When we hover over with mouse

IMPORTANT: You must have at least Bricks Builder 1.5 (at the time of writing, it is still in beta). You can have older versions, but you will need to do all design with containers, instead of sections and divs.

Now, that we know the basics, let’s get to work. And don’t worry if you will not be able to follow the whole tutorial, or you don’t have time, I will share the template below in a format, that you can import it into Bricks Builder.

Creating a card with static data

Now we will create a card, step by step. We will create it as a template, so you can use it anytime and anywhere you will need it.

Creating a template

First, you need to create a template and below are the steps we need to make:

  • On the left menu, hover on “Bricks”, press “Templates” and then click “Add New”.
  • After that, we need to set the name for a template. I will set it as “Hover Card Design”, but you can set it as anything else.
  • On the right side, we need to choose “Section” from dropdown. This tells the Bricks that the template will be a section that we will use in our design
  • Next, it’s good idea to publish the template (Button number 3). After you press the button, wait for page to refresh and then you can go to the next step.
  • When we finish everything, we click “Edit with Bricks” button and wait for Bricks to load. Don’t worry, it’s fast 😉

Creating basic card layout

First, we need to create basic card layout. We will start small and then we will add elements as necessarily. We start by creating this basic layout as shown below.
First, create the elements as shown on the left side and then you can rename it as shown on the right. You can rename it as you want, as this is only the name of the element.

IMPORTANT: When I will address any element, I will most of the time call it by the new name. For example, if I will say “We add padding to the Section element”, you will know that element with the name “Section” is the right one.

Before we rename elements
After we rename elements

Settings basic size and positioning

Section

First, we will add some padding to Section element. Click on the Section element and add 80px of top and bottom padding. It should look like this now:

Now, we don’t need to do anything else to the Section element. The Container element is also good as it is and we don’t need to change it.

Card
Next, we will open Card element and set width to 300px. If you want, you can set it as any other value and you can even use calc() functions or % value.

Width of “Card” element

Size placeholder
Next, we want to set size to our Size placeholder element. This element is there just because we will expand the image on hover and it need to be there to keep the size of the card the same. We need to set height parameter for it. I choose that 200px is good value, so let’s do this. If you choose something else, keep in mind that you will need the same value on Image Hover element. We also need to set min. height to the element.

We also need to set min height

Image Hover
Next element is Image Hover. This is the element which holds the image inside. We will set the image as background in this element, but for now, let’s concentrate on other properties.
First, we need to set Height to 200px. This must be the same as the height above in the Size placeholder element. So, if you put there another value, you must put here same as above.
If you are asking yourself why, we will now set Position to absolute and Top to 0 and because of that, the element goes to the top of the Card and perfectly overlaps Size placeholder element. You can try and fiddle around with this values and you will see what happens if the values are different.

Height, Position and Top settings

Info
This element is responsible for holding all text and we need to add some padding to it, so let’s do it. I will set it like so, in the image below. You can set it different, it doesn’t really matter.

Padding settings

Heading

We need to create a little space around the heading, so let’s just set 15px margin to the bottom.

Margin settings

Author

We would like to change position ob Author element also, so let’s change margin top to 25px. As before, you can change this to your own value.

Margin settings

Now that we positioned all elements as we want, our card should look like on the image below.

Look of the card after positioning all elements

Design and functionality

In this chapter we will go over designing and adding the (hover) functionality to our card. If you haven’t noticed yet, we do all our styles on IDs, not using classes. This is because I want to keep it simple and you can always copy/paste styles form ID to class.

Note: Your design (font styles…) may look a little different, because I have already defined some theme styles and you may have defined it differently.

In this chapter, we will again all aver all elements that need styling, but the card element will be the last, because it has the most changes.

Image Hover
We have to do 3 more things in this element. We need to select an image as an background, set the link if we click on it, we need to set up CSS transitions and at last, we must add a class.

  • Set image as background
    Fist, you need to set image as a background. Select the Background menu and click on the Select image box. Then select image that you wish to have as a background. I usually like to set Background Position to Center Center. This means that it will always try to show center of the image.
First, select image here.
At the end, it should look like this.
  • Set CSS transition
    Scroll down a little and also set CSS transition to all 0.3s ease-in-out. We will set the same transitions to multiple elements. Better way would be to create a class and apply this transition to the class, but because we don’t use classes here, we will do it manually for each element.
CSS transition added
  • Adding custom class
    Now, I know I said that we will not use classes, but we need to add this one as we will use it when we will be writing custom CSS and this class will enable us to target this element. We could also use element ID, but the code is not so nice.
    To add a class, you need to click in the left top side on the input and write the class name you want. You don’t need to write the dot at the beginning. We will write: card-image-hover and then we press enter.
We will add a class
  • Setting the link
    We want this element to be clickable. So when user clicks the card, that it redirects it to another page, maybe a blog post.
    First, you go to the “Content” tab and select “HTML tag” to a (link). After that, you set the Link to External URL and write the URL you want. Or you can link to one of your pages/post that you have. You can see below how I set this up on my side.
Settings element as a link

Info
In this element, we just need to add custom class and set the link like above

  • Adding custom class
    Now we know how to add custom class, so let’s just add card-info as a class name. In the image below you can see how Bricks Builder shows that class right after it’s added. And it 1.5 version, it also displays all classes that element have (in the red square below)
How Bricks Builder shows classes
  • Setting the link
    Like before, we need to set the link here also. Set the same link as above, so that the user will be redirected to the same page regardless where on the card it clicks.

Heading
In this element, we just need to set CSS transitions and change the content, so that it’s not the default text anymore. And add custom CSS class.

  • Set CSS transitions
    Now we know how to set CSS transition, so let’s do it. Set it the same as before to all 0.3s ease-in-out
  • Changing content
    You can double click on the text in the builder and then change it, or click on it and go to the “Content” tab and change it there. Below, you can see that I set content to Title.
Changing the content
  • Adding custom class
    We add custom CSS class to this element. Now you already know how, so you can set the class to card-title
Class added

Excerpt
The same as for Heading element, we just need to set CSS transitions, change content and add custom CSS class.

  • Set CSS transitions
    The process is same as always, you set CSS transitions to 0.3s ease-in-out
  • Changing content
    We change the content the same way as above. I changed it to simple Lorem Ipsum text.
Content is changed
  • Adding custom class
    We add custom CSS class to this element. You can set the class to card-excerpt
Class added

Author
And this is another very similar element and here we must also change the content, add CSS transition and also change the typography and add custom css class

  • Changing the content
    Let’s first change the content. This is the author field, so let’s input “Author: Your Name” and let’s set Author: to be bold. You can set this 2 ways. One is that you select the “Author” in the text and then click “Bold” button, or you can just write <b> </b> tags around in the content panel.
Ho to make text bold.
  • Changing the typography
    When you have the element selected, go over to Style–>Typography tab and change Font size to something smaller. I set it to 14px as shown on the image below.
Changing the typography
  • Set CSS transitions
    The process is same as always, you set CSS transitions to 0.3s ease-in-out
  • Adding custom class
    We add custom CSS class to this element. You can set the class to hide-on-hover.
Class is set

Card
And now, for the last element we have to style is the Card element. Here we need to set the background color, border and custom CSS. The card should now look like in the picture below

How the card look before we style it
  • Background color
    We need to add a background color. I decided to use the color #fff4e5. To add a background color, you need to click on the Background tab in the left panel and then you click on the circle next to Background color property and you choose a color or write your own HEX value.
How to set background color
  • Border
    Next, we need to add a border. On the left panel you select Border/Box Shadow tab and then click on the little circle next to Border property. You can check the values I selected below, but you can set your own.
    You can change the color of the border by clicking the circle next to the Color property. I decided to use color #e0e0e0
Border settings
  • Custom CSS
    And the last thing we need to do before our card works as intended is adding some custom CSS code to the Card element. You can add the code on the left sidebar under CSS tab and then into Custom CSS field. The code is below:
root {
	cursor: pointer;
}

root:hover .card-image-hover{
	position: absolute;
  height: 100%;
  
}

root:hover .hide-on-hover{
	opacity:0;
}

root:hover .card-title,
root:hover .card-excerpt
{
	color: #fff;
  transform: translate(0, 40px);
}

root:hover .card-info{
	align-content: end;
  background:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
}

The card is completed, and so is the tutorial!

Now the card works as intended. You can try and hover it with mouse and the image should go over whole card and the card should be clickable.

Like I promised at the beginning, below is link to exported template that we build in this tutorial. You can use it in your project or learn on it, but I will be happy if you show me the work you’ve done 😉 Enjoy!

Leave the first comment