悬停时缩放图像[重复]答案

【问题标题】：Zoom image on hover [duplicate]悬停时缩放图像[重复]
【发布时间】：2016-08-18 19:28:09
【问题描述】：

当我将鼠标悬停在社交信息流上时，如何在图片上进行缩放。

类似于this site左侧的instagram feed。

我在悬停 css 中试过这个：

opacity: 0.5; 
filter: alpha(opacity=50);

但我无法放大。

【问题讨论】：

opacity 不用于缩放...
好吧，一方面......那些不是图像。

标签： html css

【解决方案1】：

你可以用这个。

.item {
  position: relative;
  
  border: 1px solid #333;
  margin: 2%;
  overflow: hidden;
  width: 540px;
}

.item img {
  width: 500px;  
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

<div class="item">
  <img src="http://www.joshuacasper.com/contents/uploads/joshua-casper-samples-free.jpg" alt="pepsi" width="540" height="548">
  
  
</div>

【讨论】：

可能需要溢出：隐藏。

【解决方案2】：

将此添加到 :hover:

transform: scale(1.5);

【讨论】：