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 09-13-2011, 01:50 PM
survivalknots.biz's Avatar
survivalknots.biz is offline
Junior Member
 
Join Date: Sep 2011
Posts: 5
Default

Adding hover zoom to categories


I want to have the categories have the same characteristics as the hover zoom for products. Don't know if anyone has messed with this yet. Thanks
  #2  
Old 03-02-2012, 06:30 AM
Shop here's Avatar
Shop here Shop here is offline
 
Join Date: Feb 2012
Posts: 5
Default

Yes I also would like hover on the Categories pictures.
  #3  
Old 03-02-2012, 07:51 AM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,765
Default

Please, refer to this article: http://kb.ecwid.com/w/page/30363282/...m%20on%20hover
  #4  
Old 03-02-2012, 05:18 PM
Shop here's Avatar
Shop here Shop here is offline
 
Join Date: Feb 2012
Posts: 5
Default

Hi Eugene,
The code in the knowledge base does well for the Products images, but not the Categories images. Anything that we might perhaps miss in the code? I copy and paste from the kb link here so perhaps you can find the missing stuff. Thanks.

td.ecwid-productBrowser-productsGrid-cell img {
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}

td.ecwid-productBrowser-productsGrid-cell img:hover {
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*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*/
}
  #5  
Old 03-02-2012, 05:18 PM
Shop here's Avatar
Shop here Shop here is offline
 
Join Date: Feb 2012
Posts: 5
Default

Hi Eugene,
The code in the knowledge base does well for the Products images, but not the Categories images. Anything that we might perhaps miss in the code? I copy and paste from the kb link here so perhaps you can find the missing stuff. Thanks.

td.ecwid-productBrowser-productsGrid-cell img {
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}

td.ecwid-productBrowser-productsGrid-cell img:hover {
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*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*/
}
  #6  
Old 07-11-2012, 03:32 AM
cillas creations's Avatar
cillas creations cillas creations is offline
 
Join Date: Oct 2011
Posts: 1
Default

Hi, I see this question has not been answered.... I've looked everywhere and I'm new to CSS. I've tried changing "productsGrid" to "categoriesGrid" but that doesn't work. I really need to do something with the category thumbnails, preferable zoom so it matches the rest of the store.
Thank you!
  #7  
Old 07-11-2012, 03:46 PM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,765
Default

Quote:
Originally Posted by cillas creations View Post
Hi, I see this question has not been answered.... I've looked everywhere and I'm new to CSS. I've tried changing "productsGrid" to "categoriesGrid" but that doesn't work. I really need to do something with the category thumbnails, preferable zoom so it matches the rest of the store.
Thank you!
Here is the code for the same effect for category images in the grid:
Code:
table.ecwid-productBrowser-subcategories-mainTable td {
  overflow: visible !important;
}
table.ecwid-productBrowser-subcategories-mainTable td img {
  -webkit-transform: scale(0.8);
/*Webkit: Scale down image to 0.8x original size*/
  -moz-transform: scale(0.8);
/*Mozilla scale version*/
  -o-transform: scale(0.8);
/*Opera scale version*/
  -webkit-transition-duration: 0.5s;
/*Webkit: Animation duration*/
  -moz-transition-duration: 0.5s;
/*Mozilla duration version*/
  -o-transition-duration: 0.5s;
/*Opera duration version*/
}
table.ecwid-productBrowser-subcategories-mainTable td img:hover {
  -webkit-transform: scale(1.1);
/*Webkit: Scale up image to 1.2x original size*/
  -moz-transform: scale(1.1);
/*Mozilla scale version*/
  -o-transform: scale(1.1);
/*Opera scale version*/
  box-shadow: 0px 0px 30px #808080;
/*CSS3 shadow: 30px blurred shadow all around image*/
  -webkit-box-shadow: 0px 0px 30px #808080;
/*Safari shadow version*/
  -moz-box-shadow: 0px 0px 30px #808080;
/*Mozilla shadow version*/
}
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
categories, hover, image, zoom

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 07:31 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.