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:

<divid="img1"><imgsrc="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.2sease;
}