悬停时图像的底部边缘出现一条白线

Question

我遇到了“div class 画廊”中每张图片底部出现白色像素线的问题。当鼠标悬停在上面时出现白线[我在悬停时包含了变换元素]

此外，这些图片仅包含在“画廊”和“照片”class中，不包含在任何其他 class 中。

代码如下：

div.photo {
  height: 2rem;
  transition: transform .2s;
}

.photo:hover {
  transform: scale(0.9);
  cursor: pointer;
  box-shadow: 15px 15px 15px;
}

.gallary {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 2em;
}

<div class="gallary">
  <div class="photo"><img src="https://source.unsplash.com/300x200?v=1"></div>
  <div class="photo"><img src="https://source.unsplash.com/300x200?v=2"></div>
  <div class="photo"><img src="https://source.unsplash.com/300x200?v=3"></div>
</div>

Answer 1

从 .photo 中删除框阴影并添加到图像中：

 div.photo {
height: 2rem;
transition: transform .2s;
}
.photo:hover {
transform: scale(0.9);
cursor: pointer;
}
.photo:hover img{
  box-shadow:  15px 15px 15px;
}
.gallary {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 2em;
}

    <div class="gallary"> 
      <div class="photo"><img src="https://e0.365dm.com/20/12/768x432/skysports-messi-barcelona-la-liga_5220695.jpg?20201228082630"></div>
      <div class="photo"><img src="https://e0.365dm.com/20/12/768x432/skysports-messi-barcelona-la-liga_5220695.jpg?20201228082630"></div>
      <div class="photo"><img src="https://e0.365dm.com/20/12/768x432/skysports-messi-barcelona-la-liga_5220695.jpg?20201228082630"></div>
    </div>

Answer 2

尝试将图片放在有边框的 <div> 元素中，您会在图片底部看到额外的白色 space（大约 3px）。出现这种情况是因为图片是行内级元素，所以浏览器会在基线下添加一些白色space来调整其他行内元素。摆脱这种情况的最简单方法是将图像的默认显示值从内联更改为块，即将样式 display: block; 应用于图像。

悬停时图像的底部边缘出现一条白线

A white line is appearing on bottom edge of the image on hover

html

css

transform

hover

css-transitions