时间戳

首页 > 解决方案 > 悬停时无法修复图像溢出？

html - 悬停时无法修复图像溢出？

问题描述

.gallery-wrapper
    img {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 20px;
}

.masnory-image {
    position: relative;

}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(
        0,
        0,
        0,
        0.7
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity
        0.4s;
    }
.image-overlay
    .gallery-wrapper{
    transform: translateY(
        20px
    );
    transition: transform
        0.4s;
}
.image-overlay:hover {
    cursor: pointer;
    opacity: 1;
    border-radius: 5px;
}
.image-overlay:hover
    .gallery-wrapper {
    transform: translateY(
        0
    );
} 
<div class="gallery-wrapper">
      <div class="masnory-image">
        <a href="">
          <img src="https://picsum.photos/200/300?grayscale" alt="">
          <div class="image-overlay">
            <h3>Portfolio</h3>
            <p>Ethan Hunt</p>
          </div>
        </a>  
      </div>
 </div>

当我将鼠标悬停在此图像上时，出现了一些额外的图层。我尝试了很多隐藏溢出。但这对我不起作用。我不明白它是如何工作的。请帮助我摆脱这个问题。

为了更清楚，我在这里摘录了我的代码。你会更容易理解我试图说的话。

标签： htmlcss

解决方案

你好你的问题不清楚你能告诉我你想做什么据你说有一个覆盖，因为它已经在你身边设置

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(
        0,
        0,
        0,
        0.7
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity
        0.4s;
    }

你能给出更简短的说明吗

推荐阅读