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

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;
}