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>

Answer 2

為了能夠在插入帶有<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>