Essential grid: Change text colour on cover hover

Support
#1

Hello there,

I’m trying to achieve a colour change of my text on hovering the whole grid item. Any idea?

#2

Hi There,

It could be done with the custom CSS. Could you please tell us which skin you’re using or provide us with the URL contains the grid?

Thank you.

#3

See the secure note:

#4

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

.esg-container .tp-esg-item:hover .esg-bottom {
    color: #f00f00;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Let us know how this goes!

#5

Thank you very much. Please see secure note for another question:

#6

Hi,

You can add a unique id to your grid.

Then include that id in your css code. That way, your code will only affect that specific grid.

For example

.my-grid .esg-container .tp-esg-item:hover .esg-bottom {
    color: #f00f00;
}

Hope that helps

#7

That doesn’t seem to work :frowning:

Any idea?

#8

Hi there,

Please try:

#my-grid .esg-container .tp-esg-item:hover .esg-bottom {
    color: #f00f00;
}

Here are some related links of the suggestions above for further reading:

Hope this helps.

#9

Thank you. Worked like a charm.

#10

You’re most welcome.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.