Image hover on zoom blurry

Hi, when I use Product Categories or Promo Banner images with zoom on hover, the images are blurry. Link in hidden content.

Hello,

I have visited your website and the promo banner and categories images are working fine and not blur.

Screenshot for Clarification: https://prnt.sc/w2zt5u

Please clear cache and check back.

Best Regards.

Hello, it is difficult to see, but it is a slight blur when there is no mouse hover. Please look closely. I have tried to show on the screenshot.

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached.

Sorry but I am unable to see the image blur as the images are displayed in the same quality as they are uploaded.

Please clear cache and check back.

Regards.
Xtemos Studios.

Hi Aizaz, can you please get Artem or Elise to take a look at the above screenshot. There is clearly a difference. Before hovering, the picture is slightly blurry.

Please see the attached video in the private content.

Hello there,

We have tested your banner but don’t see any difference in image quality before hover and after hover https://gyazo.com/f96673e198fca7d4ac1afdea5549b738

Kind Regards

Hi Artem, I can see the distortion in your video as well. Please take a look at this video I made that clearly shows some distortion occurring. Please pay close attention and you will notice it too.

First, you need to upload larger images to prevent quality loss on hover. And try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

.category-grid-item .category-image,
.banner-hover-zoom .banner-image {
  -webkit-perspective: 800px;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.banner-hover-zoom:hover .banner-image {
    -webkit-transform: scale(1.09) translate3d(0,0,0);
    transform: scale(1.09) translate3d(0,0,0);
}
.category-grid-item:hover .category-image {
  -webkit-transform: scale3d(1.1,1.1,1) translate3d(0,0,0);
    transform: scale3d(1.1,1.1,1) translate3d(0,0,0);
}

Ok, I will give this a try. I am thinking something needs to be changed on the theme level though as the same thing is happening in your demo. You can see the headphones move slightly to the left when hover is removed.

https://app.usebubbles.com/gybypoDTRt8dLo9gHvCoNi/comments-on-woodmart-xtemos-com/

When I use the above CSS the images are blurry with or without hover. The image seems to no longer be shifting to the side though.

https://app.usebubbles.com/i5JLzsofhnKGxMk26oj2sj/comments-on-shopnorthrock-com/

Is it possible that WordPress is compressing the images upon upload? Here is a side by side comparison of the image I just uploaded in WordPress and the same image in Irfranview (photo viewer on desktop).

Attachments:

You must be logged in to view attached files.

I have done some more testing with a normal image inserted in Elementor only, vs the image inserted through Product Category Xtemos element or Banner Image. The Elementor images look clear while the other images are still slightly blurry.

Attachments:

You must be logged in to view attached files.

There is seems to be some image optimization plugin on your website. Try to deactivate all external plugins and reupload images both to WooCommerce category and to the Elementor widget.
Note that Categories block is generated by WooCommerce templates and you can test how it works with the default WordPress theme as well. Our theme has no influence there.

My image optimization plugin has been deactivated during this testing, so it should be having no effect here.

The categories block might be generated by Woocommerce Templates, but it seems to me the promo banner is not, and they are both effected.

Again, the images are clear through standard elementor image.

We don’t know why, but the images are still different. And the second one is optimized or generated by some third party plugin https://prnt.sc/w4lo5u
Please, upload the same image to both places first.

It seems Elementor puts a suffix on the image depending on the image size selected.
https://app.usebubbles.com/5jBMcwehyyz7234ZeDQn8J/comments-on-wordpress-245642-1584517-cloudwaysapps-com/

Although, this still does not give any insight into why the images placed through the Xtemos Category Block are slightly blurry when compared to the elementor images.

The image distortion is even occurring on your demo sites. Please take a look at the cars demo here. You can see the images become clear upon hover.

https://app.usebubbles.com/hEg29xH6DL5HLF17V5mudp/comments-on-woodmart-xtemos-com/

We see that you removed these elements from the home page. Please, return them again so we could check one more time.

Artem, the elements are still there for you to check. But the same problem exists on your own demo!

Hi,

The following issue is related to the CSS transform rendering technique in web-browsers. Default images without any animation style cant be compared to the elements like categories, product hovers and banners because last one has different animations on hovers done by CSS transforms like transform: scale, transform: translate, etc.

By default, following animations is using CPU 2D rendering which can cause some flickering or make images blurry during hover.

Flick caused by 2D rendering can be fixed by translating following CSS layer to the 3D render using GPU Hardware acceleration via properties like transform: translate3d(0,0,0);, perspective or backface-visibility: hidden;witch can make hover more smooth and which was suggested to you in the following reply. But this fix can’t completely fix blurry images because in that case block with image is constantly rendered by device GPU.

More about hardware accelerated rendering you can read here:
https://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css https://www.html5rocks.com/en/tutorials/speed/layers/

Unfortunately this browser behaviour is can’t be changed via custom code, and it can’t be fixed via theme update because by transforming too much CSS layers to 3D hardware acceleration don’t fix the problem entirely but can cause performance issues on old devices and drain battery faster.

In the following case if you want to make categories and banner looking like default images you need to disable hover animations completely via element options or custom CSS.

Best Regards

Hi Bogdan, thank you for the reply.

Although, I must say this is not really an acceptable answer. You’re telling me that we can’t perform a simple scale upon hover without distorting the image? This should be an elementary task. I think this needs to be addressed within a theme update.

There are countless threads with solutions to this issue here:

https://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome

https://stackoverflow.com/questions/36787529/how-to-fix-blurry-image-on-transform-scale

https://forum.webflow.com/t/a-fix-for-when-your-elements-move-up-and-or-blur-during-animations-interactions-on-chrome/11629

https://www.creativetweets.com/how-to-fix-blurry-image-on-transform-scale/

As we suggested in previous reply following browser behaviour can’t be changed via WordPress theme and our theme elements didn’t have any special additional images handling except standard CSS transforms.

Possible solutions that you provided is already was mentioned in our previous reply (http://prntscr.com/w5dcer) and already was provided to you in our previous answer with custom code (https://xtemos.com/forums/topic/image-hover-on-zoom-blurry/#post-251375).

For example:
translate3d(0,0,0) (which is equal to translateZ)
1. http://prntscr.com/w5ddmd
2. http://prntscr.com/w5de41

backface-visibility: hidden
1. http://prntscr.com/w5dfnq
2. http://prntscr.com/w5dfx9

will-change: transform
1. http://prntscr.com/w5dhlb
2. http://prntscr.com/w5dhut

You can try to add properly scaled images with a different CSS combination of following values by yourself, but unfortunately there is no one universal solution for this transform browser behaviour.

Best Regards

[Author]

Posts