Product image questions - by richnation - on WordPress WooCommerce support

This topic has 5 replies, 2 voices, and was last updated 5 years, 3 months ago ago by Rose Tyler

  • Avatar: richnation
    richnation
    Participant
    December 20, 2018 at 16:38

    I would like my product images to be zoomed in when hovered over and also have the “quick view” feature to encompass the whole product image (I don’t want the words to encompass the image, only the function).

    Basically, when someone hovers over my product image I would like the image to zoom, and then if they click anywhere on the image I would like it to pull up the quick view where they can still add to cart.

    Can this be done with css?

    4 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    December 20, 2018 at 16:52

    Hello,

    Please try to use this custom css code:

    .products-grid .product .product-image-wrapper img,
    .product-slide .product .product-image-wrapper img{
        transition: transform .2s; 
    }
    .products-grid .product:hover img,
    .product-slide .product:hover img{
        transform: scale(1.1);
    }
    .products-grid .product .show-quickly,
    .product-slide .show-quickly {
        font-size: 0px !important;
        width: 100%;
        height: 100%;
        background-color:  transparent;
    }

    Regards

    Avatar: richnation
    richnation
    Participant
    December 20, 2018 at 17:03

    Yes, that worked. Thank you very much.

    Which variable would I change if I want to zoom in a little more?

    Avatar: richnation
    richnation
    Participant
    December 20, 2018 at 17:39

    Never mind, I figured that out.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    December 21, 2018 at 09:17

    You’re welcome!

    Regards

  • Viewing 5 results - 1 through 5 (of 5 total)

The issue related to '‘Product image questions’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.