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

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

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1448840
    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;
    }
    #1448853
    David
    Staff
    Customer Support

    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 ?

    #1451968
    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?

    #1452278
    Leo
    Staff
    Customer Support

    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?

    #1671991
    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.

    #1672937
    Leo
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.