Grid Item Hover Animation

Support
#1

Hello there,

For my Essential Grid I have 9 blocks, and enabled the “Grid Item Hover Animation: Zoom out 90%” for my grid. However, there are 2 blocks within the grid, that I do not want to have this setting on… though this setting works as an apply to all or nothing function.

Would it be possible to call out the two blocks that I just want to remain static, and not have this animation feature for when hovered?

#2

Hi @RocktheHouse1876,

Thanks for reaching out.

You’ll have to assign different skin for those other items and make sure that skin doesn’t have the hover animation. Please check this about editing the skin https://www.themepunch.com/essgrid-doc/item-skin-editor/

And this for assigning different skin https://www.themepunch.com/faq/apply-alternate-skin-specific-grid-item/

Thanks!

#3

Hello @Rad,

I must of worded my question in a confusing way… the two block items mentioned are already assigned a different skin than the rest, and do not have a hover animation.

However since I needed almost all of the blocks and all elements within each block to have an animation together at the same time when hovered, the hover animation is assigned globally with one click to the entire Grid via the “Grid Item Hover Animation: Zoom out 90%” in the grid settings of my “Homepage 3” grid.

Would it be possible to call out the two blocks mentioned that I just want to remain static, and not have this animation feature for when hovered?

Thank you!

#4

Hello @RocktheHouse1876,

You might have sent us the incorrect site url. When I log in to the given credentials, I am only seeing 1 Essential grid item.

I am also not seeing the page ../client/SRSCRO/ .

Please double check it.

#5

Hello @RueNel, the previous full login url is correct. I believe you must be in a different WP setup on our server.

#6

Hi @RocktheHouse1876,

There is no ready made option. We can hack it using CSS though. Try this custom CSS:

li#eg-13-post-id-4,
li#eg-13-post-id-4 .esg-media-cover-wrapper,
li#eg-13-post-id-4 .esg-overlay,
li#eg-13-post-id-5,
li#eg-13-post-id-5 .esg-media-cover-wrapper,
li#eg-13-post-id-5 .esg-overlay  {
    transform: none !important;
}

Change 4 and 5 with the ID of the post where you don’t want hover animation to take effect.

#7

oh wow, interesting @Lely !

I’ve placed the CSS in the Pro> Theme Options > Global CSS. And then, for those 2 blocks, I “edited element”, and under Item Data, Post ID: I placed a 5 and a 4 for the other block mentioned. Though, no changes, yet?

The two blocks mentioned are not posts, the items are created in the skins, not sure if this matters?

#8

Hi @RocktheHouse1876,

Adding post ID will have no affect, it will always start at zero for this kind of grid (non-post type). I changed the CSS to this

li#eg-13-post-id-0,
li#eg-13-post-id-0 .esg-media-cover-wrapper,
li#eg-13-post-id-0 .esg-overlay,

li#eg-13-post-id-8,
li#eg-13-post-id-8 .esg-media-cover-wrapper,
li#eg-13-post-id-8 .esg-overlay  {
    transform: none !important;
}

Please check, it will not take effect on grid preview in admin since the CSS is applied on the front only.

Thanks!

#9

I understand now! Thank you for your brilliant help!

#10

You are most welcome!
We’re glad we were able to help you out.

#11

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