Question

我有：

小组
它包含图像
图像内的底部容器作为叠加层
一些内容

将鼠标悬停在面板上时，图像会缩放到1.1。这完全没问题。但是，随着图像的缩放，可以在外部和叠加层下快速查看。这可以在Chrome上无缝运行，并且在 Internet Explorer 中似乎是一个问题。

问题是否可以确保与图像不会在其自身容器外部扩展到覆盖层的侧面/底部的铬相同的行为？

.item {
  width: 100%;
  height: 500px;
  float: left;
  background: #ebebeb;
  overflow: hidden;
}
.item .content {
  width: 100%;
  font-family: "Segoe UI";
  padding: 20px;
}
.item .image {
  width: 100%;
  height: 300px;
  float: left;
  background: red;
  overflow: hidden;
  position: relative;
}
.item .image img {
  width: 100%;
  transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  border: none;
  outline: none;
  box-shadow: none;
}
.item .border {
  width: 150%;
  height: 20px;
  position: absolute;
  background: #fff;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
.item:hover .image img {
  transform: scale(1.1) rotate(0.1deg);
  -ms-transform: scale(1.1) rotate(0.1deg);
  -webkit-transform: scale(1.1) rotate(0.1deg);
  border: none;
  outline: none;
  box-shadow: none;
}

<div class="row">
  <div class="large-up-2">
    <div class="column">
      <div class="item">
        <div class="image">
           <img src="http://www.planwallpaper.com/static/images/Beautiful_Wallpaper_1080p_Full_HD.jpg"/>
          <div class="border"></div>
        </div>
        <div class="content"> Content </div>
      </div>
    </div>
  </div>
</div>

Answer 1

通过在下面的元素上添加-1px边距来解决底部问题，从而掩盖了1px的差距。

Internet Explorer - 悬停出血时的图像比例

1 个答案: