How to duplicate this gradient background on hover?

[sterlinghealan]

see photo below. I have an idea from a website I would like to use on my own. When you hover over a this cell it will transform (scale) and then the background and text will change color. Specifically the background will become a cool gradient. How can I mimic this? Their website was built using X-Pro as well.

Thanks!

[marc_a]

Hey Sterling,

Thank for reaching out!

Would you mind sharing the website URL of your reference site? Just add it in the secure note so that we can check and guide you to achieve it.

• Secure Note.

Thank you.

[sterlinghealan]

Posted on the original post!

[tristup]

Hi Sterling,

I have checked the example URL and found that the hover color has been added using the custom CSS coding, which is beyond the scope of Theme Support. I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks

[deranaloge]

you can easily add this yourself:

first generate the gradient with as an exampke this tool:
https://cssgradient.io/

then add the code in eg column > custom css:

$el:hover {
    background: rgb(241,195,13);
    background: linear-gradient(160deg, rgba(241,195,13,1) 0%, rgba(235,94,14,1) 100%);
}

you can expand this code with all kind of css (font-size, color, font-family, transition,…)

cheers

[sterlinghealan]

Thank you! This worked perfectly. Any idea on how to associate the text & icon in the background to change to white when the element is hovered?

[marc_a]

Hey Sterling,

You need to check the CSS classes to target that option. I highly suggest that you check this article on how to find the right CSS classes.

• https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/

Hope that helps.

[deranaloge]

of course,
there are several ways. i dont know how the original works and how you did setup it in cornerstone but one way:
set in the column where you did add the code unter effects tab: link child interactions.
then go to your icon and set the base color to black and the ineraction color to white.
the same for the text.

cheers

[tristup]

Hi @deranaloge,

You are quite correct that transformation can be achieved through the Effect Module but the color of the interaction can’t be set with a gradient color. And that is why it required custom CSS code.

Thanks