Raw content Icon shortcode > How to add hover?

[website2fix]

Hi guys, im still using some classic elements,

this might be not that hard for some, but cant figure out where/how to put in the ‘hover’ command with a color.

now i got this shortcode, and i want to add a hover effect on it, any replies would be appreciated!

<a href="your-link-here">[x_icon style="font-size:51px;" type="desktop" icon_color="#fff" icon_size="60px" bg_color="rgb(70, 70, 70)" bg_size="90px" bg_border_radius="50%"]</a>

THANKS!

[jade]

Hi there,

Please try adding a class to the <a> tag then add this CSS in the Global CSS:

.the-a-class:hover .x-icon {
    color: #ff0000;
}

The code above assumes that the class you have added to the link is the-a-class like:

<a class="the-a-class" href="your-link-here">

Hope this helps.

[website2fix]

@Jade

class=“the-a-class”

Thanks for fast reply, I tried it, it didnt work, it didnt hover tho…

EDIT: I had to add !important , without it it didnt work
Thanks!

[jade]

Hi there,

Please try this:

.the-a-class .x-icon:before {
    transition: color 0.4s ease-in;
}

.the-a-class:hover .x-icon:before {
    color: #ff0000;
}

Hope this helps.

[website2fix]

ohh nice slick effect! I love these small snippet codes to finetune the page.

Awesome!!

Thanks @Jade

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!