I need help to apply zoom on hover - Brooklyn Theme

Store Design
1

Hi!

I’m using Brooklyn theme and my product mockups look pretty small in desktop view - designs aren’t visible on merchandise. Example below.

Kar511ik_0-1633389393777.png
Kar511ik_0-1633389393777.png1116×582 123 KB

Could someone please share possible solutions to this? I was wondering if ‘zoom on hover’ could be applied to the products while the user is viewing them in the list, like done on this site - https://www.redbubble.com/shop/dark+humor+t-shirts

My shopify website - https://heypoochie.com/

Password - flaile

Would be grateful to any solutions!

2

hello @Kar511ik

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-collection .grid-uniform .grid__item .grid-product__wrapper  .product--wrapper .product--image {
    -webkit-transition: 2s ;
    -ms-transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
}
.template-collection .grid-uniform .grid__item:hover   .grid-product__wrapper  .product--wrapper .product--image {
    transform: scale(1.5);
   -webkit-transform: scale(1.5);
   -moz-transform: scale(1.5);
   -ms-transform: scale(1.5);
   -o-transform: scale(1.5);
}
2 Likes
3

Hey good people at Natztech!

Thanks for the reply on this. My ‘Assets’ folder has a ‘theme.scss.liquid’ file. File pathway is assets/theme.scss.liquid
Will the code be different or shall I use the same code snippet? Shown below.

Kar511ik_0-1633420029037.png
Kar511ik_0-1633420029037.png249×157 1.91 KB

4

Thank you! This works perfectly.