Return to previous page

Product image questions - by richnation - on WordPress WooCommerce support

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

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
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
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

richnation

Participant

December 20, 2018 at 17:39

Never mind, I figured that out.

#206240 Copied

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)