/* [1] The container */
.img-hover-zoom {
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  /* transform-origin: 50% 65%; */
  transition: transform 3s, filter 1s ease-in-out;
  /* filter: grayscale(100%); */
  /* filter: brightness(150%); */
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  filter: brightness(100%);
  transform: scale(2);
  filter: grayscale(0);

}