Show text over image on hover in Elementor and CSS I Fade in text on background image with overlay

Learn how to make text appear on hover when you put your mouse on an image using Elementor and CSS. This tutorial is using Elementor Pro version and CSS. Upon hovering, the image gets a color overlay and the text shows up on top of it by setting the opacity to 1 in CSS for its hover state. Then use the transition-duration to make the fade in effect smooth.

This effect is great for showing portfolio items details for example, or when you have a team gallery with the people's names and positions displayed on top of each member's portrait photo etc.

💻 Grab the CSS code here:
https://www.cssgamelab.com/2024/11/28/css-codes-for-wordpress-tutorials/

🚀 Interactive CSS Basics course for designers and non-coders:
https://www.cssgamelab.com/

👉 Get 20% off using the code VELVET20OFF at Checkout.

––––––––––––––––––––––––––––––

PURCHASE AND DOWNLOAD ELEMENTOR PRO:

https://be.elementor.com/visit/?bta=61312&nci=5709

––––––––––––––––––––––––––––––

SIMPLE CUSTOM CSS AND JS PLUGIN:

To use custom CSS code with Elementor FREE, you can use the Simple Custom CSS and JS plugin for Wordpress that you can download here:

https://wordpress.org/plugins/custom-css-js/

Have fun and thanks for watching!

If this tutorial helped you, please share or subscribe.

––––––––––––––––––––––––––––––

This video and description may contain affiliate links. If you click on a link and make a purchase, I will receive a commission from the sale. That way you are supporting my channel and allowing me to keep making videos and posts like this. I only promote products that I use, have experience with and support, such as Elementor Pro.

––––––––––––––––––––––––––––––

Have a specific problem in Elementor that you don't know how to solve with CSS? Comment below to let me know which video you would like to see next!

––––––––––––––––––––––––––––––

MUSIC:

Artist: Corbyn Kites
Track Title: Staycation

––––––––––––––––––––––––––––––

Видео Show text over image on hover in Elementor and CSS I Fade in text on background image with overlay канала CSS Express