Grid cells shake on hover

Hi there. In Pro I’ve created a 3x3 Grid which has a hover action attached to each of the nine elements that pushes the row below downwards on hover. It works as it should however if you hover over the top border of the lower nine cells the grid starts to shake. Do you have any idea what could be causing this?

Hello Alan,

Thanks for writing in!

The content of each cell is overlapping. Please remove the negative margin of the first div so that there will be enough space between them which would prevent the shaking as your hover.

Hope this makes sense.

Hi there and thanks for getting back to me.
Although I have removed the negative margin the shaking still persists. Is there something I have missed in your solution?

Hey Alan,

Your settings need to be modified to have a smooth effect. I went ahead and did the following:

  • The position of the 2nd DIV needs to be changed to “Absolute”.
    Screen Shot 2021-03-15 at 8.13.05 AM

  • “No Pointer Events” should be enabled to all of the contents of the 2nd DIV

  • And lastly, the z-index must be set to a higher number so that as you hover over a cell, the 2nd div will display on top of any other elements on the grid.

Please check your page now.

That works and thanks for the solution.
It would have been great to retain the content push down effect when hovering however if that’s not possible then I’m more than happy with this. Thanks again.

Hello Alan,

Glad that we were able to help. Please feel free to reach us if you have any query regarding our theme and theme settings.

Thanks

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