Icons hover effect using live composer

Hi themes team,

Please I’d like to add a hover effect on some icons. How I can do that knowing that I have used live composer to build my web site.

Thank you in advance, Nassim

Dar Nassim,

Did you mean the social icons of social widget as seen on our demo site (footer section)?

Regards,
Kharis

Hi Kharis, no, for the social media icons, they are running well.

I’m talking about the info box icons (“pharmaceutical”, “medical devices”, cosmetics ") in the home page. Please check it out: www.pharmaxiom.com

Thank you in advance. Kind regards, Nassim

Hello Nasim,

Thank you for clarifying.

If I could get your point clearly, you would add a couple of CSS code below into your site’s additional CSS option or child theme’s style.css to apply a hover effect on the icons.


.dslc-info-box:hover .dslc-info-box-image-inner{
  border-color: #ff0000 !important;
  background-color: #fff000 !important;
}

.dslc-info-box:hover .dslc-icon{
  color: #ff0000 !important;
}

To set individual hover effect, use this code instead:


/* Pharmaceutique */

#dslc-module-3hnj2d .dslc-info-box:hover .dslc-info-box-image-inner{
  border-color: #ff0000 !important;
  background-color: #fff000 !important;
}

#dslc-module-3hnj2d .dslc-info-box:hover .dslc-icon{
  color: #fff !important;
}

/* Dispositifs Médicaux */

#dslc-module-8dmmj08 .dslc-info-box:hover .dslc-info-box-image-inner{
  border-color: #ff0000 !important;
  background-color: #fff000 !important;
}

#dslc-module-8dmmj08 .dslc-info-box:hover .dslc-icon{
  color: #fff !important;
}

/* Cosmétique */

#dslc-module-2tgg0m .dslc-info-box:hover .dslc-info-box-image-inner{
  border-color: #ff0000 !important;
  background-color: #fff000 !important;
}

#dslc-module-2tgg0m .dslc-info-box:hover .dslc-icon{
  color: #fff !important;
}

Regards,
Kharis

Mister Kharis, it works perfectly !! Thank you very much for your professionalism and support :slight_smile: you can put this post as resolved. KR, Nassim

My pleasure!

Please let us know in a new thread if you need anything else.

Have a nice weekend!

Regards,
Kharis