How to make this hover effect?

I believe there is one (shop) template in Themler cloud with section of images and effect like this. Study code and see how it is done. I am not sure, i believe I have seen one like this.

Dont know if it was Prestashop, Magento or WooCommerce, check them all.

Hi, thanks for fast answer, can you send me a link or keywords how to find this sections ?

I forgot it, was long time ago. It was one shop CMS theme with 3 images right above footer. Custom sections done by Themler developers. There you can study code and settings.

No, I was wrong. it was different hover effect.

http://templates.themler.com/Themes/Preview?id=1905104

Will use oportunity to say to developers many demo Themes have wrong links now and doesnt work. Majority of Prestashop/Magento demo themes.

But, do it manually. Not so big deal, takes 30 seconds.

.your-class-holding-image img
{
   border: none;
   margin: 0;
     display:block;         
/* Webkit for Chrome and Safari */
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;

  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1, 1);
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;

  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1, 1);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;
}
.your-class-holding-image img:hover {
/* Webkit for Chrome and Safari */
  -webkit-transform: scale(1.4, 1.4); // This is the enlarged size scale of the image.
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;

  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1.4, 1.4);
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;

  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1.40, 1.40);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;
  transition-duration: 500ms;
}

ok, thanks a lot :)

Last edited 14 November 2016 by Alexander Dzhuninski