In this text, you will see how you can add beautiful hover effects to your WordPress site using the options provided by the free version of Elementor. Hover effects are a really cool thing and can improve your site design as well as the user experience on the site. More about the different effects below.
Hover effects
The first effect that will be discussed more is the color transition. You click on a section and under the Style option select Hover where you can change the color you want to see when you hover your mouse over a certain section. In this example the transition is from blue to a lighter blue and you can also set the duration of that transition in seconds under the option Transition Duration.
After the hover
The next effect is the hover effect of the whole image. In this example, we have a black and white image that we will turn into a color image when we hover over it. You need to click on the section and also under the option Style see the code Normal that there is a black and white picture, and when you choose Hover insert that same color image and that way your image will change when you move your mouse over it.
After the hover
The next effect is changing the image position. In this example, we use the same image, we just change its position in the frame Style options under Position. When standing on Normal, the position is Top Right, and when it is on Hover, the position is Bottom Right. When we move the mouse over the image, we get a cool image scrolling effect.
After the hover
The next effect is the overlay hover effect. With the color transition, you get a nice effect of moving from one color to another, but unfortunately we don't get this effect in the picture. We can achieve this by changing the color under the option Background Overlay. Let's choose Hover and there we determine which color we want to add to the image and the percentage of brightness of that color under Opacity. In this way, we get a pretty nice effect, and when you move the mouse over the image, the title stands out even more.
After the hover
The next effect is the border effect. This is not set within the section but within the plugin. You click on Image Box, then under the option Advanced you go to Hover, select the type of boundary which in this case is Solid, you choose the color and size of that border. With this you get a very nice effect that highlights your columns in the section and leaves a good impression in the overall design.
After the hover
The next effect is the poster effect, where we combine 2 different effects. First we select the image and under the option Style within Hover we choose the animation that suits us, in this case Grow. Then we go to the option Advanced and under Border let's choose Box Shadow and the color we want to set. With these 2 effects, we achieve an excellent effect as if the poster is jumping out of the screen.
After the hover
All of these effects are available at the section, column, and plugin levels. In the following example, we see the effect at the column level. We select the column and under the option Style the code Hover we choose a color and get a nice effect.
After the hover
And the last effect that will be displayed is at the plugin level. Here we have a plugin Price list and under option Advanced let's choose Background, where a color is selected, in this case white, with which a good focus is obtained on a specific text that is passed over with the mouse.
After the hover
Here you are shown different options of hover effects, you can experiment different things on your own, anything can be achieved just let your imagination run wild. I hope that this text was useful for you and that you learned something new, if you are interested in reading more tips for independent work, you can check them out on our blog, and in case you want to consult with professionals, click on this one Link.
Source: youtube
