Essential grid speed effect for hover

[Lyser]

Hello,
You can’t choose the transistion speed for the hover effect in essential grid :

i tried this code found here but it don’t work :

.esg-entry-media.esg-transition {
    transition-delay: 0.125s !Important;
}

How to choose the speed of transition for hover animations ?

[marc_a]

Hi @Lyser,

Thanks for reaching out!

We are not quite sure why you can’t choose the transition speed for the hover effect, I suggest that please make sure that you had the updated Essential Grid plugin. It would also be best if you could share with us the page URL with the essential grid so that we can take a closer look.

Hope that helps.

[Lyser]

It seems that the plugin is updated :

[ruenel]

Hello @Lyser,

You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use. As it turns out, there is NO element with the esg-transition class. This is that you will have to remove the .esg-transition from your code.

Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[Lyser]

Thx you for the link!

I tried to change every class but nothing happen, i know you don’t provide support for giving code but if you could just show me where is the class i need to target to change the animation duration, it will help me understand where i need to look in the developer toolbar, i’ll do the code myself.

[ruenel]

Hello @Lyser,

Please understand that not all custom CSS will work out of the box for you. And also, the code given in the old thread is for the Essential Grid using the Howard Taft skin. If we compare to your site, you are using Washington. The skin that you are using may not even have a transition so, any CSS code you apply to delay the transition will never work. You may need to edit your grid skin instead. Please check out this documentation:

• https://www.themepunch.com/essgrid-doc/item-skin-editor/

Again, you need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

Example codes you’ll find:

Best Regards.

[Lyser]

Ok, thank you for your help.

[ruenel]

You are most welcome.