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

为了能够通过 <img> 插入的图像在悬停时进行缩放，您需要使用变换和过渡来进行平滑缩放。

#imageZoom{
  overflow:hidden;
  transition: all 1s;
  width:200px;
  height:200px;
}

#imageZoom img:hover{
  transform: scale(1.2);
}

<div id="imageZoom">
  <img src="http://duncanlock.net/images/posts/better-figures-images-plugin-for-pelican/dummy-200x200.png">
</div>

Answer 2

您可以将图像包裹在 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>

CSS 放大图像悬停

CSS zoom in on image hover

html

css

hover

zooming