gamesnews image effect

Hi,

I really like zooming image effect (when you hover over any image) in gamenews template.

How can I do the same with product images in my esport template if it is this possible at all.

Hi

Please enable the use of css override on template parameters and them try adding this code on ../css/override.css

Code: Select all

img.product-image,
img.browseProductImage {
   border: none;
   -webkit-transform: scale(1.0);
      -moz-transform: scale(1.0);
       -ms-transform: scale(1.0);
        -o-transform: scale(1.0);
           transform: scale(1.0);
   -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
       -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
           transform-style: preserve-3d;
   -webkit-transition: -webkit-transform 0.15s linear;
      -moz-transition:    -moz-transform 0.15s linear;
        -o-transition:      -o-transform 0.15s linear;
           transition:         transform 0.15s linear;
}
img.product-image:hover,
img.browseProductImage:hover {
   -webkit-transform: scale(0.96);
      -moz-transform: scale(0.96);
       -ms-transform: scale(0.96);
        -o-transform: scale(0.96);
           transform: scale(0.96);
}


Cheers

Hello,

thanks. It worked for the product page.

How to make it also work for whole category view ?

Any ideas on this ?

Is this possible to have image effect on category view, not one product ?

Is this possible to have image effect on category view, not one product ?

Hi again

The code provided should work also on VM category layout also.
Can you show me your website?

If you mean on VM frontpage with featured, latest and top 10 products you can use this code instead:

Code: Select all

    img.product-image,
    img.browseProductImage,
    .category img,
    img.featuredProductImage  {
       border: none;
       -webkit-transform: scale(1.0);
          -moz-transform: scale(1.0);
           -ms-transform: scale(1.0);
            -o-transform: scale(1.0);
               transform: scale(1.0);
       -webkit-transform-style: preserve-3d;
          -moz-transform-style: preserve-3d;
           -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
               transform-style: preserve-3d;
       -webkit-transition: -webkit-transform 0.15s linear;
          -moz-transition:    -moz-transform 0.15s linear;
            -o-transition:      -o-transform 0.15s linear;
               transition:         transform 0.15s linear;
    }
    img.product-image:hover,
    img.browseProductImage:hover,
    .category img:hover,
    img.featuredProductImage:hover {
       -webkit-transform: scale(0.96);
          -moz-transform: scale(0.96);
           -ms-transform: scale(0.96);
            -o-transform: scale(0.96);
               transform: scale(0.96);
    }



Cheers

Thanks.

What I mean is to have same effect on category view, because most viewing is done by scrolling category view with products listed in it. Maybe I didn't explained well what category I mean.

Please show me your website because the code listed also works on vm category view, so something must be wrong and i need to see it.

http://prezervatyvai.lt/durex

Please show me your website because the code listed also works on vm category view, so something must be wrong and i need to see it.

ok i see now

So use this instead:

Code: Select all

    img.product-image,
    img.browseProductImage,
    .category img,
    img.featuredProductImage,
    .browse-view .product img  {
       border: none;
       -webkit-transform: scale(1.0);
          -moz-transform: scale(1.0);
           -ms-transform: scale(1.0);
            -o-transform: scale(1.0);
               transform: scale(1.0);
       -webkit-transform-style: preserve-3d;
          -moz-transform-style: preserve-3d;
           -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
               transform-style: preserve-3d;
       -webkit-transition: -webkit-transform 0.15s linear;
          -moz-transition:    -moz-transform 0.15s linear;
            -o-transition:      -o-transform 0.15s linear;
               transition:         transform 0.15s linear;
    }
    img.product-image:hover,
    img.browseProductImage:hover,
    .category img:hover,
    img.featuredProductImage:hover,
    .browse-view .product img:hover {
       -webkit-transform: scale(0.96);
          -moz-transform: scale(0.96);
           -ms-transform: scale(0.96);
            -o-transform: scale(0.96);
               transform: scale(0.96);
    }


Cheers

Finally Thanks.

The last wish Can it work on front page (top level of website) also ?

Code: Select all

img.product-image,
    img.browseProductImage,
    .category img,
    img.featuredProductImage,
    .browse-view .product img,
    .nspImage  {
       border: none;
       -webkit-transform: scale(1.0);
          -moz-transform: scale(1.0);
           -ms-transform: scale(1.0);
            -o-transform: scale(1.0);
               transform: scale(1.0);
       -webkit-transform-style: preserve-3d;
          -moz-transform-style: preserve-3d;
           -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
               transform-style: preserve-3d;
       -webkit-transition: -webkit-transform 0.15s linear;
          -moz-transition:    -moz-transform 0.15s linear;
            -o-transition:      -o-transform 0.15s linear;
               transition:         transform 0.15s linear;
    }
    img.product-image:hover,
    img.browseProductImage:hover,
    .category img:hover,
    img.featuredProductImage:hover,
    .browse-view .product img:hover,
    .nspImage:hover {
       -webkit-transform: scale(0.96);
          -moz-transform: scale(0.96);
           -ms-transform: scale(0.96);
            -o-transform: scale(0.96);
               transform: scale(0.96);
    }


Cheers

Now the mission accomplished. Thanks!

Now I see that after chrome update, chrome browser shows this effect incorrectly. could this be chrome problem ?

Other browsers shows this effect fine.