Hover Animation

Hi,
Is it possible to make the modules custom html with just an image in, to do the hover animation like the demo??
Is it a different way to do it.
Here is the link http://nikosaliazis.com/fashion/
Also i would like to ask why I got in some module so big border...
Thanks

Hi,
you have so big space becasue you put img in <p>. This elements have own margines as same as container. Please try use suffix clear. About animation please try add suffix to your modules for example 'my suffix' and then please try add to override.css

Code: Select all

.mysuffix img {
.itemImageBlock img {
height: auto;
max-width: 100%;
width: 100% !important;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
}
.mysuffix img:hover {
-webkit-transform: scale(1.25) rotate(-7deg);
-moz-transform: scale(1.25) rotate(-7deg);
-o-transform: scale(1.25) rotate(-7deg);
-ms-transform: scale(1.25) rotate(-7deg);
transform: scale(1.25) rotate(-7deg);
}


and remember to enable override.css option in template settings.

With the given CSS I have a problem with the transition effect not working. i see the same problem on the example provided before.

please help get the transition working with a custom image

Please change code I gave you to this one:

Code: Select all

.mysuffix img {
        height: auto;
        max-width: 100%;
        width: 100% !important;
}
.mysuffix img {
   -webkit-transition: all 0.4s ease;
   -moz-transition: all 0.4s ease;
   -o-transition: all 0.4s ease;
   -ms-transition: all 0.4s ease;
   transition: all 0.4s ease;
}
.mysuffix:hover img {
   -webkit-transform: scale(1.2) rotate(-7deg);
   -moz-transform: scale(1.2) rotate(-7deg);
   -o-transform: scale(1.2) rotate(-7deg);
   -ms-transform: scale(1.2) rotate(-7deg);
   transform: scale(1.2) rotate(-7deg);
}