Hi
I am sorting out an Ecwid shopping site for a client. In the custom design help section there is an option for making images larger on hover and they supply custom Css code.
The problem is I don’t know where to insert the code.
Regards
Kevin
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Usually style code goes in Page>HTML Markup in the Before end slot but remember to wrap it in … tags
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I am sorting out an Ecwid shopping site for a client. In the custom design
help section there is an option for making images larger on hover and they
supply custom Css code.
The problem is I don’t know where to insert the code.
Actually there are lots of places to put code, CSS and otherwise… without
seeing what they are telling you, there’s no way to reliably give you good
advice. Do you have to apply special classes to items on your page? CSS
must have targets else it sits and does nothing.
I was hoping some ecwid fans would chime in, but if not can you direct us
to specifically what they are they are telling you to do?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thos is all they say:
How to make images zoom on hover
Last updated Apr 18, 2014
If you want to zoom product image on hover in the grid product view, apply this custom CSS code:
/*Credits: Dynamic Drive CSS Library */
/*URL: Dynamic Drive CSS Library- Practical CSS codes and examples */
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/
}
This trick is described there: Dynamic Drive CSS Library- CSS3 Hover Image Gallery.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
So what they are telling you is that the first block of style code reduces the original image size while the second increases it and adds a shadow on hover.
Page>Html Markup and in the Before end section paste the following.
<style type="text/css">
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/
}
</style>
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks Dave
That worked fine.
Regards
Kevin
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options