Custom hover color for icon boxes in sections

artline_projects · January 2015

Hi, Muffingroup,
We would like to set a custom icon hover color for a certain section. We managed to set a custom color for icons through custom CSS for the page and section. But hover color is still the main theme color. So, if an icon in an icon box is gray now, the hover color is blue, for example. We use .dark for this section.
We use the following CSS to set icon colors:
.section_class .icon_box .icon_wrapper { color: #color; }
But we cannot figure out how set a hover color and make the icon color change to white on hover. An inspector mode in the browser was of no help.

Albert · January 2015

Please send us url to page where this happen and we'll have a look.

artline_projects · January 2015

Sure. It still is seabas.ecointeg.ru.
Please, look for a green section after a section with an image background and 3 items in a row.
The section in question contains icon boxes with now gray icons.

Albert · January 2015

So, to change this hover color for icon box, please use below css:

.icon_box:hover .icon_wrapper:before, .icon_box a:hover .icon_wrapper:before { background-color: #000; }

artline_projects · January 2015

Thanks a lot! It works fine! But the second part of the question is: How to make an icon color change to white on hover?

Albert · January 2015

Sorry we missed that part of question

For that please use below css:

.icon_box .icon_wrapper i:hover { color: #FFF; }

artline_projects · January 2015

Got it! Thanks again!

Albert · January 2015

You're welcome

artline_projects · January 2015

Just in case someone uses this discussion to resolve the same issue we mention that we have figured out that putting the following CSS:
.section_class icon_box:hover .icon_wrapper i { color: #color_number; }
would bring the exact result that you have in your demo for icon color on hover.

CueTheSwans · April 2015

Hi there, thanks for the info on this.

Forgive my complete lack of CSS knowledge! I have changed the mouse-over color of my icon boxes using the above code, how do I also change the icon color itself (before hover)?

Thanks

Albert · April 2015

@CueTheSwans To change icon's color itself, please use below css:

.icon_box .icon_wrapper i { color: #000 !important; }

CueTheSwans · April 2015

Awesomes - thank you!

Albert · April 2015

You're welcome

babaksardary · September 2016

Hello, sorry if this is a duplicate question but where should I save this CSS? Should it go into the custom CSS box for the specific icon box? I tried that and the icon color remained the same as before.

Albert · September 2016

Theme options > Custom CSS & JS > Custom CSS section.

Custom hover color for icon boxes in sections

Comments

This website uses cookies