The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 01-05-2016, 05:25 PM
Darjeelingboy's Avatar
Darjeelingboy is offline
 
Join Date: Mar 2012
Posts: 17
Default

I have added a transition to the products in grid view


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.
  #2  
Old 01-06-2016, 03:35 PM
Antea's Avatar
Antea Antea is offline
Ecwid Team
 
Join Date: Nov 2015
Posts: 381
Default

Quote:
Originally Posted by Niranjan Naulakha View Post
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:
Code:
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:
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;
}
Quote:
Originally Posted by Niranjan Naulakha View Post
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!
__________________
Anna,
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

Please click Thanks if my reply helped you.
The Following User Says Thank You to Antea For This Useful Post:
Darjeelingboy (01-13-2016)
  #3  
Old 01-13-2016, 05:05 AM
Darjeelingboy's Avatar
Darjeelingboy Darjeelingboy is offline
 
Join Date: Mar 2012
Posts: 17
Default

Thanks Antea.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
image zoom, products, zoom on hover

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:01 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.