[Resolved] On hover in product catalog the second image is not pixel clear

[Diederick]

Hi,

I’ve already made a topic a while ago about an issue with this.
It was partially resolved until I noticed the second product image has some strange behavior.
(second images where to small to display correct so this was resolved then)

So when you hover over a product image in my catalog there is an animation to a second image.
When the animation is done the image receives a blur effect.
So I started to undo all css and looked in my functions if there was anything that could pinpoint this.
But can’t find anything.

Maybe anyone can point me in the right direction?
You can see this happen if you change the time in this code which is found in the css of the second image:

.inside-wc-product-image img {
    width: 100%!important;
    height: 100%!important;
    margin: 0!important;
    object-fit: cover;
    transition: all 0.4s ease-in-out!important;
}

to

.inside-wc-product-image img {
    width: 100%!important;
    height: 100%!important;
    margin: 0!important;
    object-fit: cover;
    transition: all 4s ease-in-out!important;
}

[David]

Hi there,

it may be my eyes as a lot of things look blurry 🙂 but i am not seeing the issue. Is this happening on any particular browser or device ?

[Diederick]

Hi David,

It happens on both Chrome and Edge.
Don’t now about other browsers but I guess it would be the same.
It’s a small details but the blur sometimes hides small details.
Knowing that it’s possible to show the full image without blur makes me wondering what’s causing it.
I can see the full image if I set the transition to a long period like 4 seconds.
Then just at the end of the transition the blur happens.
Any idea?

[Leo]

Think I can see the issue but that’s not a default effect or a theme issue.

Can you disable all of your custom functions, CSS and plugins except WooCommerce and GP Premium?

[Diederick]

Finally got some time to have a closer look here.
Found a solution.
Seems like a transition can default cause a blur on opacity.
So I’ve added :
backface-visibility: hidden;

And this seems to resolve the issue.

[Leo]

Glad to hear.

[Author]

Posts