DEV Community

loading...
Cover image for How To Show a Background Overlay and The Content of a Column on Hover in Elementor

How To Show a Background Overlay and The Content of a Column on Hover in Elementor

Jalu Pujo Rumekso
Fullstack Dev. Building apps and sharing tips on Vue, Hapi, Objection, Bootstrap, and more. Looking for a remote dev role.
・5 min read

In this post, I am going to show you how to display a background overlay of a column and the headline widget on top of it when the user hovers over the image. The final product would be like this:
Alt Text

Cool, isn’t it? So let's get started!

Set Up The Image and The Content

Add a new section and choose the two-column structure. Then click Edit Column.
Alt Text

In Style > Background > Background Type choose Classic. Then under Image click the + sign to add the Image you want to display.
Alt Text

For now, you'll only see a very small portion of the image. No worries, it happens because our column doesn’t have any content yet. So let's add a Headline Widget on it.
Alt Text

Why is it still the same? Since our Headline widget is only a one-line content, then the column doesn't get much additional height.

However, by adding this content now we can adjust the column padding and see the change. If you do it before adding the content, you won't see the result until you place the content. Do you get it?

Now let's adjust the padding.

Click Edit Column and go to Advanced tab. Before we add the padding, let's turn off the Link Values Together button so we can set each padding value individually.

Now set the padding for the top and bottom value to make the column stretched vertically. You can play around with the number, but for the purpose of this tutorial let's set it to 300 hundred since I know it'll look good.

Please note that we make the top and bottom padding identical because we want the content to be vertically centered.

Alt Text

Alright, now we've successfully made our image visible, but it only shows us a small part of it. We don't want that right? Let me show you how to fix it.

Go to Style > Background and set the Position to Center Center. Next, change the Repeat to No Repeat. Lastly, set Size to Cover.

Voila, now we have a beautiful image that takes half of our screen.
Alt Text

Set The Overlay

Now we've our image set up, then our next step would be setting up the background overlay. Let's proceed.

Go to _Style > Background > Hover. Next, choose Classic for the Background Type and set the color.
Alt Text

If you do it right, now you should have a column filled with an image that shows a background overlay on hover. And that's it for the image.

Adjusting the Text

Before we move on, let's change the content of our Headline widget into something more meaningful. I'll change it to "A Cozy House with Sea View".
Alt Text

Now let's edit the color so it goes well with our background overlay.
Alt Text

Look good?

I think yes, except for one thing: the text is too close to the edge of the image. Let's add some padding to it so it has more room to breathe.
Alt Text

And that's it. Now we have text on top of an image with an overlay on hover.

Our next step would be to hide the text on the normal view before we can reveal it on hover.

The CSS Code

To hide our text, we need to set the opacity to 0. For this task, we need to set it manually using CSS since there is no such an option in the Elementor editor.

There are two steps in using CSS to customize the Elementor widget. First, we need to give the widget a CSS Class or ID name. Second, we need to write the CSS code itself.

Let's do it.

Go to Advanced tab and give the CSS Classes a name. I'll name it 'my-hidden-headline'.

Alt Text

Then, we need to give our column a CSS Class name too so we can target it when the user hovers on it.

Go to Advanced tab and fill the CSS Class with a name, let's name it 'my-bg-overlay'.

Alt Text

Why we use CSS Class instead of ID? I prefer to use class than id because it opens up the possibility to use it more than once on the same page. In our case, it means that we can use the 'my-hidden-headline' again for other Headline widgets somewhere on this page. If we use ID, that will be only for that specific widget.

Now, before we add our CSS code in the theme customizer, let’s save our changes first. So, click UPDATE and view your page.

Then click Customize and copy the following code:

After that, paste that code into Additional CSS setting panel and click Publish.

Alt Text

What we are doing here is targeting the my-hidden-headline class and set its opacity to 0 so it becomes hidden on the normal view.

Finally, copy this code:

and paste it below the previous code. This final code set the headline widget opacity back to 1 when the my-background has hovered.
Alt Text

Please note that we use the transition property so the Headline reveals smoothly.

Conclusion

That's it, now when your user hovers over the image, it will display the background overlay and the text.

To sum up, here's what we've learned in this tutorial:

  • Adding image to a page via column background image setting
  • Adjusting the padding to control the size of a column
  • Adding background overlay on hover
  • Giving an element a unique CSS class name.
  • Hiding text via CSS
  • Finally, showing text on hover.

If you found this tutorial helpful please leave a comment and feel free to request another Elementor or WordPress customization tutorial as well.

Discussion (1)

Collapse
kallal103 profile image
Kallal103

great tutorial, really like it