[Darjeelingboy]

Hi, I have added some codes for zoom effect on my products in grid view. The link to my store is here.

Is it possible to better it? I wanted to add a css code 'overflow' so that the box size remained fixed while the image zoomed.

I'd also like to zoom the image on the products page. Better to have all the image files zoom individually on hover like in other shopping carts.

[Antea]

Originally Posted by Niranjan Naulakha

Hi, I have added some codes for zoom effect on my products in grid view. The link to my store is here.

Is it possible to better it? I wanted to add a css code 'overflow' so that the box size remained fixed while the image zoomed.

I'd also like to zoom the image on the products page. Better to have all the image files zoom individually on hover like in other shopping carts.

Hello!
Thank you for contacting us!

You can make the image boxes in the grid product view remain fixed while the image is zoomed by adding the CSS code given below to your active custom CSS theme:

html#ecwid_html body#ecwid_body .ecwid-productBrowser-productsGrid-v2 div.ecwid-productBrowser-productsGrid-productTopFragment, html#ecwid_html body#ecwid_body .ecwid-productBrowser-productsGrid-v2 div.ecwid-productBrowser-productsGrid-productBottomFragment {
overflow: hidden;
}

To apply the zoom effect to the images on the Product Details page as well, you can use the following CSS code:

div.ecwid-productBrowser-gallery .ecwid-productBrowser-gallery-image img  {
-webkit-transition: all 1s ease !important; /*Webkit: Animation duration*/
-moz-transition:all 1s ease !important; /*Mozilla duration version*/
-o-transition:all  1s ease !important; /*Opera duration version*/
}
 
div.ecwid-productBrowser-gallery .ecwid-productBrowser-gallery-image img:hover {
-webkit-transform:scale(1.2); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.2); /*Mozilla scale version*/
-o-transform:scale(1.2); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
z-index:9999;
}

Originally Posted by Niranjan Naulakha

Better to have all the image files zoom individually on hover like in other shopping carts.

Could you please share the link to a store so I can better understand what result you are expecting to get when using the zoom effect? Thank you!

[Darjeelingboy]

Thanks Antea.