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

[@Reialesa]

The CSS required to do this 👇 .container { background-color: #EEEEEE; 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: #FFFFFF !important; } .icon svg { fill: #635bff !important; transition: all 0.3s ease-in-out; } .container:hover .icon svg { fill: #FFFFFF !important; } .text { color: #111111 !important; transition: all 0.3s ease-in-out; } .container:hover .text { color: #FFFFFF !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: #FFFFFF !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: #EEEEEE !important; } .container:hover .heading h2 { color: #635BFF !important; } .container:hover .icon svg { fill: #635BFF !important; } .container:hover .text { color: #111111 !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 ;) */

[@caiorodrigomkt]

My bro it was supposed to be great, great enough to overdelivery content to me, and I don't understand how to change just one text (not all elements of your example). Could you please explain it for me? I've been trying with: Put the "titleh4" in the Advanced > Classes CSS of the specific title and use in the Custom CSS: .titleh4:hover { color: #f7f7f7 } But it sucks, may you help me, please?

[@danieloliveiraphoto]

Thanks! Your video elevated my last project an next level

[@Reialesa]

That's awesome to hear, Daniel! Thank you for watching, I appreciate it. 🙌

[@maxvsr]

Nice video with a clear explanation. First I wasn't able to recreate this but in the end it worked after playing around a bit, thanks!

[@MizzyDixie]

Thank you for explaining so clearly and getting right to the point with excellent examples.

[@paologera]

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

[@Reialesa]

That's awesome to hear and I'm happy the video was helpful. Thank you very much for your kind comment, I appreciate it a lot! 🙌😃

[@mattirons4909]

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

[@chimastudios]

What a legend mate.

[@Reialesa]

Right back at you! Thank you for your support, I appreciate it. 🙌

[@neckofthewooods]

Thanks man. This saved me so much time!

[@Reialesa]

I'm happy to hear that, thank you for your support! 🙌

[@santiagoarena6808]

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

[@Reialesa]

I'm happy to help, thank you for your kind comment, I appreciate it! 🙌 Greetings from Slovenia. 👋

[@bytecrusader]

Great video, but i don't know why the icon is not responding to the hover effect, i have changed couple of custom icons yet same problem

[@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: #FFFFFF !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.

[@Reialesa]

Awesome advice! That's a great way to approach your hover effects if you have relatively simple content, like the one I'm showing in the video. I love the tip about how to combine this with icons from the icon library, it's very helpful. Adding in a separate class, such as .heading, is great if you want to add in your CSS via the admin bar (Customize - Additional CSS) and have it affect every element with that class on the whole website. It's also the reason I added in the normal state colors, even though, technically, they are not needed. This way, you can change everything easily on the whole website just by changing a little bit of CSS. For example, using just h2 for that would likely cause some issues, as you probably don't want every heading with the h2 tag to have the same color. Adding in the classes also allows you to create different hover effects for multiple headings, text editors or icons within the same container. Since it's very difficult to go over every possible scenario in one video, I tried to make it as universal as possible. With that said, I appreciate your input, especially since you helped me learn something new today. 💪

[@stewber]

@@Reialesa yeah I know the reasoning and in a lot of circumstances it’s useful for global elements to have the additional class for sure. Thanks again for the video. Keep up the great content.

[@Reialesa]

Thank you! 🙌

[@cheikhdiagne1934]

wonderful. This is helpful

[@ideainkers]

​@@Reialesa The solution given by @stewber is working. However, the number of Icons is limited in Icon Library & their quality is not great. ​ The free elementor version does not allow you to upload the SVG File or the Icon file. How can you fix that.

[@nashgaming23]

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

[@Reialesa]

Awesome, I'm very glad this video was valuable to you. Thank you, again, for your support! 🙏

[@LG-hv7zb]

Excellent... Thank you! 😃

[@borisnieminen677]

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

[@sodeeq_azeez]

Hello, I don't know if you found a solution to this already? But, can you try to change the HTML tags of the headings so that if one is h2, change the other to h3? That way, you can target each of those heading tags... Let me know if that works.

[@Reialesa]

Hello! I'm glad you find it helpful. There's no additional containers needed, you just need to make sure you add the correct classes to your headings and that you target and style each class individually. Here's an example: .container { transition: all 0.3s ease-in-out; } .heading1 h2 { transition: all 0.3s ease-in-out; } .container:hover .heading1 h2 { color: red !important; } .heading2 h2 { transition: all 0.3s ease-in-out; } .container:hover .heading2 h2 { color: green !important; } The HTML tags don't need to be changed, but if you do change them, just make sure that is reflected in the CSS as well. Try it out and let me know how it goes! 💪

[@borisnieminen677]

@@Reialesa Thanks alot mate, will try it out, cheers!

[@borisnieminen677]

your almost at 5K! keep it up, super channel!

[@markbaquerizo6190]

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" }

[@markbaquerizo6190]

You'll have a cleaner code just applied on pc instead of adding lots of that

[@elevateyoursoul8]

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

[@zahid_benu]

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

[@Reialesa]

I'm happy to help! If your heading has a border and you want it to change colors when you hover over the container, try this: .container:hover .heading h2 { color: #FF934F !important; -webkit-text-stroke-color: #093824 !important; } Of course, you can also combine it with the smooth transition effect explained in the video. Let me know how it goes! 💪

[@aimenbakht9606]

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?

[@Reialesa]

Thank you, I appreciate that very much! 🙏 Here's how you can change the background color of your ''stacked'' icon when hovering over the container: .icon svg { fill: #635bff !important; transition: all 0.3s ease-in-out; } .container:hover .icon svg { fill: #101010 !important; } .container:hover .elementor-view-stacked .elementor-icon { background-color: red !important; } So, we're targeting our icon and giving it a hover effect when we hover over the container, just like in the video. And then we're just adding in the last bit that changes the background color. Just keep in mind that if you use this and you have more than one stacked icon in the same container, it will change the background color for all of them. Let me know how it goes! 💪

[@aimenbakht9606]

@@Reialesa Worked like a charm Thank you so much 🙌

[@Reialesa]

Awesome, that's great to hear, thanks for letting me know. I'm happy to help! 💪

[@galogalofre]

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

[@Reialesa]

Hi! Yes, the process for columns and sections is the exact same. 💪

[@Cookingwithauntied]

Thank you very much

[@Reialesa]

I'm happy to help, thank you for your kind comment! 🙏

[@michaelatalent]

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

[@Reialesa]

Hi. What kind of trouble? One thing that can cause issues are elements in the SVG that have a stroke. So, before exporting, make sure everything is an object, including text. In Illustrator, you do that by selecting your icon, going to ''Object'' - ''Path'' - ''Outline Stroke''. Just be careful and have a backup, because you'll no longer be able to easily edit the stroke width when you do that. Let me know if this fixed it! 💪

[@AlJami-x1n]

Hello, I have the same problem. But I'm using Figma for the SVG. What should i do? @@Reialesa

[@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?

[@Reialesa]

Hi! I'm very happy to hear that you found it helpful and that for the most part, you managed to get the result you want. Certain widgets in Elementor have to be targeted a little differently and you have to find the correct class(es). You can find the appropriate classes by inspecting the element (I recommend using Mozilla Firefox for this). Try this: .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item { transition: all 0.3s ease-in-out; } .container:hover .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item { color: #FFFFFF !important; } Let me know how it goes! 💪

[@Art-01]

Thank u for sharing👍🏻🙏

[@Reialesa]

I'm happy to help, thank you for your support! 🙌

[@CipherBlub]

Hi, I would like to ask, so for free version, is hover is not available? since there is no css

[@Reialesa]

Hello! It is very much possible to do this with the free version of Elementor as well. You just have to place your CSS somewhere else. I recommend you go into your admin bar, press 'Customize' and add your CSS under 'Additional CSS'. It works the exact same way. Let me know how it goes! 💪

[@LeroyKlassen-t5u]

how would i do this on an image box?

[@LeroyKlassen-t5u]

the icon doesn't change when hovering how to fix this?

[@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; }

[@Reialesa]

Hello! It's actually working perfectly for me, at least with the text editor. If you're using a heading, you need to include the H tag that is applied to that heading as well. For example, if your heading has an HTML Tag called H2, your CSS would look like: /* 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 h2 { color: #1f1f1f !important; transition: all 0.3s ease-in-out; } .position:hover .employee-name h2 { color: #F5c635 !important; } Try it out and let me know if it works! 💪

[@AnushaYadav]

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

[@Reialesa]

That's a good question and something I've been playing around with as well. It's actually quite easy if you're willing to let go of the smooth transition and if you style your icon before you actually use it, instead of changing its color afterwards. First, create another container - this will allow you to control the width/size of your icon. Add in an icon widget and give it a class. Then, style that class like so: .icon { content: url('the link to your icon'); } .container:hover .icon { content: url('the link to your new icon'); } The .container class is targeting our largest container in this case. There's no need to target the container that just has the icon in it, that's only there so you can control the size. You can find the link to your icon by going into your Dashboard - ''Media'' - ''Library''. Click on your icon and copy the link from ''File URL''. If you also want to change the size on hover, just target the smaller container, the one that has the icons in it (iconcontainer in this case) and add in: .container:hover .iconcontainer { width: 100px; } Let me know how it goes! 💪

[@AnushaYadav]

@@Reialesa oh this is amazing.. i shall report on it..

[@vikashjha1356]

How to create stepflow using elementor pro

[@Reialesa]

Hi! What exactly do you mean by ''stepflow''? I can't find any decisive answer/definition on Google.

[@narcissistgamer]

it is behind a paid wall yikes fk that i m gone use php

[@Bjornhulman]

Great tutorial thank you! I had some issues where the headers would change as soon as the mouse was on the page rather than on the containers. I tried changing class names to be more unique but still had the same issues. I found this tutorial on targeting elements quite useful to resolve my problem. kzbin.info/www/bejne/gGbaeo2khMuje5I

[@Reialesa]

I'm glad you found the video helpful! I'm not quite sure how that happened but more specific targeting is definitely one of the ways to fix it. I'm happy to hear that you managed to get everything working. 💪

[@TaigiTWeseDiplomat--Formosan]

０．０

[@TaigiTWeseDiplomat--Formosan]

0.0

[@colinh2203]

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: #000000!important; transition: all 0.1s ease-in; } selector:hover .box-icon .elementor-icon { fill: #ffffff!important; }