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:
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.
In Style > Background > Background Type choose Classic. Then under Image click the + sign to add the Image you want to display.
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.
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.
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.
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.
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".
Now let's edit the color so it goes well with our background overlay.
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.
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'.
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'.
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.
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.
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.
Oldest comments (1)
great tutorial, really like it