Hover image – image shaking while zooming them

[didacusk]

Hi,

after I did different changes on theme, I found that when I hover mouse on products on shop or product category page – they are shaking while zooming the image.

On a single product page where at the bottom there are connected products – for them hover and zooming is smoothly as before.

I though issue is related with LScache so I purged entire cache for the website, deactivated plugin. No change.

Tried to enable/disable hover image setting. No change.

Tried to empty cache from Chrome and hard reload the page. No change.

Tried with different browser – Edge. Problem occurs also here.

I attached the URL in private content so you can check. Problem occurs also in “AJAX products” in the first default tab on index page, but for the rest two tabs is working normally. When I try to edit the main page in elementor – there animation is also working smoothly.

• This topic was modified 1 year, 4 months ago by didacusk.

Hello,

I have visited your site and not seen image shaking issues. Can you please share the small video for better understanding so i will check and give you a possible solution.

Best Regards.

[didacusk]

Yes, issue disappeared 30 mins after that without changing anything on website. I am very confused. I will continue monitor it.

• This reply was modified 1 year, 4 months ago by didacusk.

[didacusk]

Hi, issue is present again. Since website is now password protected I’m providing with a video.

https://streamable.com/dmvhd5

Today what I changed is – enabled LScache again, switched in Mobile menu the position of the category and menu columns.

Edit: Issue is present in Chrome today, Edge is working smoothly.

• This reply was modified 1 year, 4 months ago by didacusk.

Hello,

This is the image hover effect of the theme. Go to Theme Settings > Product Archive > Products Styles > disable the option hover image.

Best Regards.

Yes, I liked the image hover effect but please take a look carefully on the video. Image is shaking when image hover. That is the problem in that topic.

https://gemoo.com/tools/upload-video/share/574991029508276224?codeId=v6gWG60dkw7Ra&card=574991025641127936

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .product-grid-item .product-element-top:hover .hover-img {
    transform: none;
    -webkit-transform: none;
} 

Best Regards.

So far working good with the additional CSS code. Thanks, you can close the ticket.

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts