[Support request] Woocommerce Image hover on shop/category pages

[John MacKenzie]

ok so ive done a bunch of searching on this and cant seem to find any real answer if its possible or should work.

basically to get images to look right i have the ratio of images set to show as 1:1 so they are all the same size. This causes some to not show fully.

my client was wondering if there is a way to have a hover effect when on category pages (showing a list of products) so that when one hovers over an image it expands to the proper dimensions to show the full image (not necessary size, but just the fully image itself?)

thanks!
John

[David]

Hi there,

could be doable with some CSS. But first you would need to set the Product Images to their original sizes or at least aspect ratio. Then we can try some CSS to force them to look cropped and apply the zoom hover effect …… well at least thats the plan.

[John MacKenzie]

oh wow ok thanks, amazed there isnt a plugin for this. ive set it to uncropped for now, thanks!!

[David]

Try adding this CSS:

body:not(.single) .inside-wc-product-image {
    width: 300px;
    height: 300px;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin: auto;
}
body:not(.single) .woocommerce ul.products li.product a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body:not(.single) .woocommerce ul.products li.product:hover a img { 
    object-fit: contain;
}

[John MacKenzie]

thanks!!

I tried that and almost there however the images are now pushed off the right of the screen

thanks so much!

John

[David]

Did you resolve it ? It looks fine to me – maybe the browser cache needed clearing. Let me know.

[John MacKenzie]

nope if you go to /art-category/textile/ you will see what i mean.

thanks!
John

[David]

Oh yeah lol – add this extra CSS to reduce there sizes for those desktop views where the sidebar takes up space:

@media(min-width: 1024px) {
    body:not(.single) .inside-wc-product-image {
        width: 200px;
        height: 200px;
    }
}

[John MacKenzie]

Thanks! added but it didnt seem to change anything (tried different browsers?)

thanks for your help

John

[David]

Can you move that CSS below the original CSS i provided.

[John MacKenzie]

thanks i tried that still seems the same?

thanks!

[David]

Can you remove all of that CSS i provided and try this:

body:not(.single) .inside-wc-product-image {
    width: 300px;
    height: 300px;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin: auto;
}

@media(min-width: 1024px) {
    body:not(.single) .inside-wc-product-image {
        width: 200px !important;
        height: 200px !important; 
    }
}

body:not(.single) .woocommerce ul.products li.product a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body:not(.single) .woocommerce ul.products li.product:hover a img { 
    object-fit: contain;
}

[John MacKenzie]

awesome thanks!

last question is there anyway to make the images get larger on hover instead of smaller?

Thanks alot!

[David]

I had a look – but i couldn’t see an easy way to do that with the Woo markup – what makes it difficult is that some images are landscape and some are portrait.

[John MacKenzie]

ok thanks so much!!

John

[Author]

Posts