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 04-13-2012, 12:09 PM
Pat Coldrick's Avatar
Pat Coldrick is offline
Junior Member
 
Join Date: Apr 2012
Posts: 2
Default

product zoom on hover in list view


Hi, I'd like the ability to zoom on hover
as per this :

http://kb.ecwid.com/w/page/30363282/...m%20on%20hover

But this is only for the grid view. Is there a similar css option to zoom the product image in the product browser LIST view?
  #2  
Old 04-13-2012, 12:24 PM
Pat Coldrick's Avatar
Pat Coldrick Pat Coldrick is offline
Junior Member
 
Join Date: Apr 2012
Posts: 2
Default

Ok figured it......just in case ayone is interested

Just use:

td.ecwid-productBrowser-productsList-thumbnailCell img

and

td.ecwid-productBrowser-productsList-thumbnailCell img:hover

(instead of td.ecwid-productBrowser-productsGrid-cell img)


My code looks like this >>

td.ecwid-productBrowser-productsList-thumbnailCell 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-productsList-thumbnailCell 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*/

}
The Following 2 Users Say Thank You to Pat Coldrick For This Useful Post:
Maya (04-13-2012), Terry Boswell (10-30-2015)
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
browser, hover, list, product, 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 01:08 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.