【问题标题】: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);

【讨论】:

    猜你喜欢
    • 2016-02-03
    • 1970-01-01
    • 2018-12-01
    • 2015-06-01
    • 1970-01-01
    • 2020-03-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多