How to Add Hover Effects to WordPress Using Elementor
Articles,  Blog

How to Add Hover Effects to WordPress Using Elementor


Hi there, today I’m going to show you how
to add beautiful hover effects to your WordPress websites, using the free
Elementor hover feature. This is a really cool feature that can increase and
improve your engagement and design interaction. I’m going to show you, step
by step, how I created each of these sections. So let’s go into Elementor and
see how it is done. So for the first section, I want to add a color transition
so I’ll go to: section>style and under hover, I can choose whatever color I want. I’m going to choose this lighter blue.
This way when I hover over it you can see the color transition from
the dark blue to the lighter blue. I can also set the transition duration this
way, making the whole transition longer. Next, we have an image hover effect. What
I want to do is turn this black and white image into a colorful image. To do
so, again I go to section>style. In the normal state I have this black and white
image. In the hover state I have the colorful image of the lion. Now when
I hover over it, you see the beautiful transition from black & white to color. Next, we have another image effect. So
here what we’re doing is using the same image on normal and hover.
We set the position to top right and on hover we set it to bottom right. This way
when I hover over it you see the cool transition of position that we get neck
I’m going to show you the overlay hover effect so as we’ve seen when you set
color transition you get a nice transition from one color to the other
in image we don’t get this effect but to bypass it what I can do is add a
background overlay effect so on hover I’ll set this purple color with opacity
of 0.6 this way when I hover over it you see how the headline pops out and looks
much more impressive here we can see the border effect now how this is done is on
the widget level so I go to my image box I go to advanced and under border on
hover I have the border type of solid 8 pixel and I’m going to choose this
turquoise color this way when I hover over it I see this nice effect this nice
focus this can really pop out your feature sections and be really good for
your entire design interaction next we have this nice poster effect this
combines two different effects both available on the free version of
Elementor so if I go to the image I will first use the hover animation of row to
pop out the image and then I can add under advanced border hover I can add a
box shadow of a darker color this way when I hover over it you see the Box
shadow thickens and I get the sort of pop out effect that really lifts the
whole image off the screen all these the amazing hover effects are available on
the section level on the column level and on the widget level so here we see
it done on the column level we set again column style hover choose this bold
yellow yellow color to set a really nice and
a real nice contrast to focus on those boxes finally I want to show you this
effect on the widget level so I have here a price list and again under
advanced background I’m going to add a hover color of white this way when we
hover over the elements they will get a nice focus I hope you’ve seen that this
is a really cool feature that we’ve added to the free version of Elementor I
invite you to explore it and try it out on your own and there’s really endless
possibilities you can reach with this effect so tell me what you think in the
comments below and also please subscribe to this channel so you can get this kind
of amazing updates that we keep bringing to our page builder until next time this
is Ben from Elementor.

61 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *