Change icon box wrap color on hover

Comments

• Phil

  July 2021

  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

  July 2021 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.
• Phil

  July 2021

  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

  July 2021

  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

  July 2021

  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

  July 2021

  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

  July 2021

  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