CSS zoom in on image hover

Question

Using the following code I can zoom in on the image on hover:

.image {
  width: 250px;
  height: 250px;
  background-image: url(http://duncanlock.net/images/posts/better-figures-images-plugin-for-pelican/dummy-200x200.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px solid red;
  cursor: pointer;
}

.image:hover {
  background-size: 120% 120%;
}

<div class="image"></div>

How can I do this using an <img> tag instead of a <div> with a background image?

Answer 1

You can wrap the image in a div:

<div class="item">
  <img src="http://via.placeholder.com/200x200">
</div>

And apply this CSS:

.item { //This is the container div
  border: 1px solid red;
  overflow: hidden;
  width: 200px;
  height: 200px;
}
.item img { //This is the img
  transition: all 0.3s;
}
.item:hover img { //This is the img during hover
  transform: scale(1.5); //Increase or decrease this number to change the zoom
}

.item {
  border: 1px solid red;
  overflow: hidden;
  width: 200px;
  height: 200px;
}
.item img {  
  transition: all 0.3s;
}
.item:hover img {
  transform: scale(1.5);
}

<div class="item">
  <img src="http://via.placeholder.com/200x200">
</div>