Reveal background image behind text on hover in Elementor & CSS I How to make image fade in on hover
Learn how to make background image appear on hovering on text using CSS and Elementor Pro! Create a section, apply background overlay (not the background!) and add an image to this overlay. Then set the opacity for normal and hover states and the transition duration to make a smooth fade in effect. This will make the image reveal itself and show background when you hover on a text on top of it. We are going one step further in this tutorial and learning also how to change the text color on hover when the image in the background shows, all using just a few simple lines of CSS code!
💻 Grab the CSS code here:
https://www.cssgamelab.com/2024/11/28...
🚀 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=6...
––––––––––––––––––––––––––––––
SIMPLE CUSTOM CSS AND JS PLUGIN:
To use custom CSS code with Elementor FREE, I am using the Simple Custom CSS and JS plugin for Wordpress that you can download here:
https://wordpress.org/plugins/custom-...
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
––––––––––––––––––––––––––––––
