How to create an awesome background image blur hover effect under text and a button with Elementor.
Elementor is a great WordPress page builder plugin. In this series of videos we will be building amazing sections on our WordPress website using the Elementor page builder.
Text to image hover effects in web design offer several benefits that enhance the user experience and visual appeal. Firstly, they add interactivity and engagement by transforming static text into dynamic visuals when users hover over them. This effect grabs attention and encourages users to explore further. Secondly, it provides a creative way to display additional information or context related to the text, without cluttering the initial design. This helps to maintain a clean and minimalist layout. Additionally, text to image hover effects can enhance storytelling and convey emotions through visual elements. They also contribute to a more immersive and memorable browsing experience.
So, follow along with the video and check out how to create this using the elementor page builder plugin.
For more information on Elementor, check out our Elementor playlists below.
THEMES AND PLUGINS USED IN THESE VIDEOS:
Free Hello Theme for Elementor: https://pcm.wordpress.org/themes/hello-elementor/
Get Elementor Page Builder From Here: https://trk.elementor.com/TryElementorToday
MY YOUTUBE PLAYLISTS:
Elementor Ecommerce Shop Site Build: https://www.youtube.com/watch?
v=Sl1Ye9XHhgY&list=PLqabIl8dx2wrrX3YsjpIEL8uq5LnSkrhA
My Elementor Video Playlist : https://www.youtube.com/watch?
v=yN6YlT1Cvqc&list=LLYeyetu9B2QYrHAjJ5umN1Q
Elementor Hover Effects Playlist: https://www.youtube.com/playlist?
list=PLqabIl8dx2wqkGuqlL4RRLwJnBRO47jm2
Check out our playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists
Sub: https://www.youtube.com/channel/UCYeyetu9B2QYrHAjJ5umN1Q?sub_confirmation=1
MY BLOG
https://web-design-and-tech-tips.com
CSS CODE USED TODAY
.blur2 {
backdrop-filter: blur(0);
-webkit-backdrop-filter: blur(0);
transition-duration: .7s;
}
.blur2:hover {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
RECOMMENDED PLAYLISTS
Elementor Ecommerce Store: https://www.youtube.com/watch?v=Sl1Ye9XHhgY&list=PLqabIl8dx2wrrX3YsjpIEL8uq5LnSkrhA
Divi Snippets: https://www.youtube.com/watch?v=x8AURRJVlWE&list=PLqabIl8dx2woGTX6yFqbufkqv-29PiElB
Divi 4 Ecommerce Store: https://www.youtube.com/watch?v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9
Bootstrap 4 Basics: https://www.youtube.com/watch?v=PwUw2kgnkls&list=PLqabIl8dx2wocDgvU7lEirYjNNrm6iXGb
Elementor: https://www.youtube.com/watch?v=bYqbLiWWC-k&list=PLqabIl8dx2woAs4sOmMsgCU0cAqcyiDco
WordPress Tips: https://www.youtube.com/watch?v=3QlczYducdU&list=PLqabIl8dx2wpKhMW14Q1Rxwx864Zwx-1e
Subscribe: https://www.youtube.com/channel/UCYeyetu9B2QYrHAjJ5umN1Q
Disclaimer: Some of these links are affiliate links where I’ll earn a small commission if you make a purchase at no additional cost to you.
#YouTubeTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite #Divi #Elementor