Image Disappear on Hover, If we add more image it overlaps aswell

[Zaid]

Website – https://dxbgamers.com

We have been using your theme for quite some time and we are recently facing some issues with
the products, as when we hover on the product the image disappears. Also if we add more images the image goes out of box in the product section.

Please let me know the possible solution for the issue.

[Billy Nguyen]

Hi,

I can’t go to the admin dashboard, so please add this custom CSS to the file style.css( child-theme) or Customize CSS:

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:hover a img {
    opacity: 1 !important;
}

[Zaid]

Thanks for sharing, this works. but now when I hover the image does not zoom but rather its alt text is seen on it.

[Zaid]

This reply has been marked as private.

[Billy Nguyen]

Hi,

Some product images are small in size, so it won’t be able to zoom when you hover over the image. With larger product images, when hovering the image will still zoom up.

Ex: https://dxbgamers.com/product/dell-g7-7700-gaming-laptop-core-i7-10750h-17-3-144hz-display-16gb-ram-512tb-ssd-nvidia-geforce-rtx-2070-8gb-windows-10-copy/

[Author]

Posts