How to Add Hover Effects

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.