Change icon box wrap color on hover

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?

Comments

  • 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

  • edited July 2021

    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.

  • 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

  • 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

  • Please, try the following code:

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

    Thanks

  • 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

  • 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

Sign In or Register to comment.