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>

Answer 2

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

＆＃13;

#imageZoom{
  overflow:hidden;
  transition: all 1s;
  width:200px;
  height:200px;
}

#imageZoom img:hover{
  transform: scale(1.2);
}

＆＃13;

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

＆＃13;

CSS放大图像悬停

2 个答案: