Change icon box wrap color on hover

ArmandoB93

Hi,

I'm trying to change the color of the entire icon box (not just the icon, but the entire wrap containing icon box, title and text) on hover.

Please can you tell me a way?

Phil

Hi,

Please, do not make duplicate discussions. It will not hasten anything.

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us the link.

It is always a good idea to also attach a screenshot showing what you are referring to.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

ArmandoB93

I'm sorry for the double post, I was thinking I forgot to click "publish" in my last post ... And today I did not find it.

About the question:

this is the page https://www.mars-city.org/features/

I would like to make the "Feature 1" (and the others) Hovered changing the background color. The hover should be on the entire object, not only on the icon. I would prefer to set the icon fixed and signal the interaction with an hover on the square containing the icon box.

I hope to be clear to explain the goal I need to accomplish.

Many thanks.

Phil

To achieve that, you can write a custom CSS code and place it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Do you need help with writing it?

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

ArmandoB93

Thanks for the answer Phil. Yes I know. I tried to manage the code line yesterday but no kind of result.

Could you help me?

Thanks

Phil

Please, try the following code:

.icon_box:hover{
  background: #213705!important;
  transition: all .5s ease-in-out;
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

ArmandoB93

Great! It works.

Could you add the css necessary to make the hover line disappearing?

In this way I obtain a full static with only an hover color.

(To be honest I 'd need also to have the description padding similar to the "hover color item", to make the text more horizontally padded)

Thank you so much

Phil

To remove the hover line, please, use the following code:

.style-simple .icon_box:hover .desc_wrapper .title::before {
   display: none!important;
}

But I did not understand the part about the padding. Can you describe it to me in more detail, please?

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next