如何使用CSS在悬停时缩放图像 [英] How to zoom image on hover with CSS

问题描述

如何在悬停时使用CSS缩放div内的图像(仅缩放图像，而不缩放div).在此处

How can I zoom an image that is inside an div on hover using CSS (zoom only the image, not the div). See what I'm talking about here

推荐答案

对@ tim-klein答案的一些小修改以使视频生效

Some minor modifications of @tim-klein answer to get effect from video

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

这篇关于如何使用CSS在悬停时缩放图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！