Change the Colors (and More) of Icons, Headings, Text When Hovering Over the Container in Elementor

The CSS required to do this is pinned 📌 to the top comment.

What I use to build amazing websites:

Changing the colors of your background, your icons, headings and text editors, simultaneously, when you hover over any part of the container they are in, can seem tricky in Elementor. While not all of this is something you can do directly in Elementor, there's a very easy way to do it with just a little bit of CSS. Besides changing the colors, we will also take a look at how to change the size, the position or the rotation of any element when you hover over the container.

With the release of containers, creating clickable content is easy. Combining that with custom hover effects can help us achieve very unique and aesthetic hover cards, call to actions or even buttons. This also works with sections and columns as well.

The whole process is pretty straightforward. We're going to add classes to our container and to our elements. These classes can be anything, you just have to make sure you change them in the CSS as well, so the CSS is still targeting the right element. Afterwards, all we have to do is add in our CSS. We'll do this by going into our container and going under Advanced, Custom CSS. Alternatively, you can also add CSS to your website by going into your admin bar on any page, pressing Customize and then pressing Additional CSS. If you do it this way, the CSS will be applied to the whole website, so you can control these hover effects directly from your admin bar for any element on the website.

The last thing you have to do is just change the properties you want to customize these effects. You're likely going to want to change the color and fill properties, to change the colors of your backgrounds, headings, text editors and icons, respectively. If you decide to change the size, rotation or position, you're going to use the applicable transform property - scale, rotate or translate.

If you're going to be using the scale property and you want everything to stay in position as it gets bigger or smaller, make sure you combine it with the translate property. Another way is to just place your container inside another container, hide the overflow and add the scale property to the whole container. That way, everything inside your original container is going to get bigger but it won't go outside of the boundaries of your outer container.

This is fully responsive as well, so you can very easily change your properties for different devices, or disable them entirely on certain devices. Just make sure you delete any part of the CSS you will not be using.

#elementor #hover #colorchange

Get in touch:

Don’t be shy! Let me know what you’d like to see next, ask me anything related to design or just simply say hi.

Please note that some of the above are affiliate links, which means I earn a commission if you make a purchase, at no additional cost to you. Thank you very much if you decide to use them!

[Reialesa]

The CSS required to do this 👇

.container {
background-color:
transition: all 0.3s ease-in-out;
}


.container:hover {
background-color: #635bff;
}


.heading h2 {
color: #635bff !important;
transition: all 0.3s ease-in-out;
}


.container:hover .heading h2 {
color: !important;
}


.icon svg {
fill: #635bff !important;
transition: all 0.3s ease-in-out;
}


.container:hover .icon svg {
fill: !important;
}


.text {
color: !important;
transition: all 0.3s ease-in-out;
}


.container:hover .text {
color: !important;
}


/* Here's an example of how to use the transform properties for the heading - make sure you delete this if you won't be using it */

.container:hover .heading h2 {
color: !important;
transform: scale(1.5) rotate(-30deg) translate(0, -30px);
}


/* This part disables the transform effects on hover for mobile devices - devices under 767px. Delete this if you want the transform to happen on mobile or if you have no transform properties. */

@media only screen and (max-width: 767px) {

.container:hover .heading h2 {
transform: none !important;
}

.container:hover .icon svg {
transform: none !important;
}

.container:hover .text {
transform: none !important;
}
}


/* This part neutralizes the color change on hover for mobile devices - devices under 767px. Make sure the colors match your normal state, pre-hover colors. Delete this if you want the color changes to happen on mobile as well. */

@media only screen and (max-width: 767px) {

.container:hover {
background-color: !important;
}

.container:hover .heading h2 {
color: #635BFF !important;
}

.container:hover .icon svg {
fill: #635BFF !important;
}

.container:hover .text {
color: !important;
}
}


/* Delete any part of the CSS you don't need and make sure you change the values (colors, transition durations...) to match your needs. Don't forget to subscribe to the channel ;) */

[mattirons]

Great video! Super clear and TONS of detailed info.Thank you

[paologera]

Man! This is just what I needed. Thank you for this video and congrats, you have an awesome teaching skill. 😎👊

[elevateyoursoul]

@Reialesa, why elementor tell me: unknown property: fill ???

[neckofthewooods]

Thanks man. This saved me so much time!

[santiagoarena]

Bro, thanks you!!!! I have more of 5 hours trying to do this. Regards from Argentina

[stewber]

Hey, nice video. Icon from icon library will work in elementor and it's actually quite simple. you would have just needed to use "i" as the selector. For example,

.container:hover i {
color: !important;
}

You don't even need to reference the SVG itself as it is pulling from fontawesome library.

You also don't need the .heading when selecting the heading. just "h2" or similar class will work. Same with text, you can just do "p" or "span" whichever is being used. saves adding extra selectors which can clean up the code a bit.

Hope that helps.

[markbaquerizo]

add to your container css code this at the beginning and close curley brackets: @media only screen and (min-width: 1024px) { "here all the code just to apply the effects on pc" }

[nashgaming]

@Reialesa, also amazing video, you taught me some great stuff here as well. Thank you very much.

[borisnieminen]

Thanks, this is excellent. What can we do if we want to target 2 Heading elements separately within the same container. Now when I hover over one of the headings, both change color. How can we isolate them to respond individually? I tried adding a new class "container1" and "heading1" but same result, I also tried using #ID instead of class but still no luck. Is it possible with this method or will I have to create another child container for the second header element? Thanks

[Nextafter]

This is so helpful, thanks! I'm trying to combine two hover effects - I want the container to shift up and the text in that container to change color. I combined some CSS from those 2 tutorials and the container is shifting up, but the text won't change color. The text class is "employee-title" and the container class is "position". Any thoughts here? I pasted the code below.

/* position */

.position {
transition: all 0.3s ease-in-out;
}

.position:hover {
transform: translate(0, -10px);
}

@media only screen and (max-width: 767px) {
.position:hover {
transform: none;
}
}

.employee-name {
color: #1f1f1f !important;
transition: all 0.3s ease-in-out;
}


.position:hover .employee-name {
color: #F5c635 !important;
}

[zahid_benu]

Thanks of all. Heading got a border and the border color was not changing on hover.

[aimenbakht]

First of all Amazing work 🙌 it was really helpful
I just have 1 question, What if I have view of the icon set to stacked? How can I change the background color when hovering over the container?

[galogalofre]

Would the process be the same if I still work with sections and columns in ELementor?

[guiharboe]

Hey man! I've been waiting for such a helpful tutorial for a long time. I'm working this on a HEADER, so it is transparent and white logo, menus... and i want it to change when hovering to white background and black logo and menu text. Everything is working but the menu text... i don't know how to make it work, any advice?

[michaelatalent]

I'm having trouble with the icon svg. I've exported it as an svg and it's any other things I should check?

[AnushaYadav]

How to replace an icon with another uploaded SVG on hover?

[vikashjha]

How to create stepflow using elementor pro

[colinh]

I found this this to work with standard icons, I'm just using sections and columns instead of containers
selector .box-icon .elementor-icon {
fill:
transition: all 0.1s ease-in;
}

selector:hover .box-icon .elementor-icon {
fill:
}