Zoom On Image Hover Effect

Hello Vantage team,

Us again! Hope everything is great on your side. We come again to seek your support in the following subject:

we would like to get a zoom effect when someone hovers on an image, just like the first image in this url: http://designshack.net/tutorialexamples/imagehovers/zoomandpan.html

We are using the following code:

We tried targeting site origin image widget but it did not work so we then tried adding a text widget and using html to place the image, with the pic di, still did not work.

We are targeting the images in the home page of: http://iluminaciondelnoroeste.servicioswebmex.com/
(under the slider)

pic {
  height: 300px;
  width: 300px;
  overflow: hidden;
}
.grow img {
  height: 300px;
  width: 300px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.grow img:hover {
  width: 400px;
  height: 400px;
}

URL: http://iluminaciondelnoroeste.servicioswebmex.com/