Cool, isn’t it? So let's get started!
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.
Now we've our image set up, then our next step would be setting up the background overlay. Let's proceed.
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.
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.
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:
Please note that we use the transition property so the Headline reveals smoothly.
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.