如何使用CSS在鼠标悬停时缩放图像

Question

我该如何使用CSS对鼠标悬停在div内的图像进行缩放（仅缩放图像而不是div）？请参考此视频。

- Picoral

---

https://dev59.com/tY7da4cB1Zd3GeqP9CJy - MTK

Answer 1

一些对@tim-klein回答进行的小修改，以实现视频效果。

.container {
  border: 1px solid black;
  width: 100%;
  height: 184px;
  overflow: hidden;
}

.container img {
  width: 100%;
  height: 100%;
      transition: all 2s ease-in-out;
}

.container:hover img {
      transform: scale(2,2)
}

<div class="container">
  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</div>

- alx lark

Answer 2

你可以使用 :hover 伪类来实现一般的想法。注意：我没有过分保持 img 居中或使用过渡来模拟缓慢缩放，但是如果需要，你可以轻松地添加这些功能。

.container {
  border: 1px solid black;
  width: 100%;
  height: 184px;
  overflow: hidden;
}

.container img {
  width: 100%;
  height: 100%;
}

.container:hover img {
  width: 120%;
  height: 120%;
}

<div class="container">
  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</div>

- Tim Klein

Answer 3

有几种不同的方法来解决这个问题。

演示： https://codepen.io/shanomurphy/pen/BvMrWq?editors=1100

---

1. 使用 background-image

HTML：

<div class="zoom-bg"></div>

CSS：

.zoom-bg {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.zoom-bg:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url('https://placeimg.com/300/200/nature') no-repeat center;
  background-size: cover;
  transition: all .3s ease-in-out;
}

.zoom-bg:hover:before {
  transform: scale(1.2);
}

---

2. 使用嵌套图像和object-fit

基本上与@Alx Lark's的答案相同，但添加了object-fit以保持图像的纵横比。

HTML：

<div class="zoom-img">
  <img src="https://placeimg.com/300/200/arch">
</div>

CSS：

.zoom-img {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.zoom-img > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: all .3s ease-in-out;
}

.zoom-img:hover > img {
  transform: scale(1.2);
}

- shanomurphy