Image Zoom On Hover With CSS

I'm trying to do this guide: Link to Guide and I cant get that end :S, my image doesn't zoom out when I hover the image :S The result should be something like this: Result Here's m

Solution 1:

You can do this with Pure CSS, which is far more simple and can be put with the rest of your CSS you've already written.

You utilize this:

.the-object-you-want-to-zoom:hover {
  transform: scale(2.2);
}

https://jsfiddle.net/

Solution 2:

You have the demo here. You can add all the browser prefixes to it.

Updated:

    <div id="img1">
      <img src="https://images.unsplash.com/photo-1458668383970-8ddd3927deed?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1e9d6264da3ae9cacdddcad3b63f3c04" alt="" class="img-zoom">
    </div>


.img1 {
  margin: 100px;
  width: 300px;
  height: auto;
}

#img1:hover .img-zoom {
  cursor: pointer;
  transform: scale(1.3);
}

.img-zoom {
  width: 100%;
  transform: scale(1);
  transition: all .2s ease;
}