Return to previous page

Product image questions - by richnation - on WordPress WooCommerce support

This topic has 5 replies, 2 voices, and was last updated 6 years, 2 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?

    #206236 Copied Theme version: 3.9
    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

    #206237 Copied
    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?

    #206238 Copied
    Avatar: richnation
    richnation
    Participant
    December 20, 2018 at 17:39

    Never mind, I figured that out.

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

    You’re welcome!

    Regards

    #206254 Copied
  • 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

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Transport – WooCommerce Theme
lazy-placeholder
Poster – WooCommerce Theme
lazy-placeholder
Medical – WordPress WooCommerce Theme
lazy-placeholder
Real Estate – WordPress WooCommerce Theme
lazy-placeholder
Niche Market 02 – Multivendor WP WooCommerce Theme
lazy-placeholder
Classic Fashion Store – WordPress WooCommerce Theme
lazy-placeholder
Underwear Store – WordPress WooCommerce Theme
lazy-placeholder
Glasses Store – WordPress WooCommerce Theme
lazy-placeholder
Legenda – E-Commerce and Corporate PSD Theme
lazy-placeholder
Flowers Store – WooCommerce Theme

See All Templates

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