[survivalknots.biz]

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

[Shop here]

Yes I also would like hover on the Categories pictures.

[Eugene Rimmer]

Please, refer to this article: http://kb.ecwid.com/w/page/30363282/...

[Shop here]

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*/
}

[Shop here]

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*/
}

[cillas creations]

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!

[Eugene Rimmer]

Originally Posted by cillas creations

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:

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*/
}