html - CSS放大图像悬停

Question

使用以下代码，我可以在悬停时放大图像:

.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>

我如何使用 <img> 来做到这一点？标签而不是 <div>有背景图片吗？

Answer 1

您可以将图像包裹在一个 div 中:

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

并应用这个 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>