Motion hover effects on container backgrounds in Elementor
Inject some dynamic elements into your website with hover motion effects on backgrounds. This approach can add more visual interest to your site and boost engagement. Hover effects can cause elements on your site to spring to life and give users indicators to click, and inviting them to explore further.
The modern flair that background animations can add creates a higher level of sophistication and can take your site’s aesthetic to the next level. There are many hover effects that can be achieved easily in Elementor by default, adding unique effects that haven’t been seen before can make your website stand out.
This tutorial will show you how to add the hover motion effect to the background of an Elementor container. A circle slowly expands to fill the container when you hover and the text changes color to match the new background color. The only code utilized in this tutorial is CSS.
Example
Card Title
Code Tutorial
Step 1. Add a container with a background
Drop a container onto your page with and add this class to it .ltg_card_hover. Then add a title and add this class to it .ltg_title. This is added in the advanced tab of the Elementor sidebar.
ltg_card_hover
ltg_title
Step 2. Add CSS
Add the CSS to the page in the custom CSS section or inside of an html element wrapped in a <style> tag. This can also be added to any element or container in the advanced tab in the Custom CSS area.
.ltg_card_hover:hover .ltg_title *{
color: white !important;
transition:1s;
}
.ltg_card_hover {
overflow: hidden;
position: relative;
}
.ltg_card_hover:before {
content: "";
display: block;
background-color: black;
border-radius: 100%;
width: 6.25em;
height: 6.25em;
position: absolute;
inset: -33% -20% auto auto;
transform: scale(0);
transition: transform 1s ease-out;
}
.ltg_card_hover:hover:before {
transform: scale(20);
}
Bonus Tip: Adjust the colors
In the first block of CSS, you can change the color to adjust what color the title changes to on hover. For background color on hover, adjust the background-color in the .ltg_card_hover:before block.