CSS:添加悬停覆盖会导致div也出现在屏幕顶部

Question

我正在处理一个图像的CSS覆盖图，试图在图像悬停时显示文本。我让它工作了，但由于某些原因，文本也都显示为画廊上方的一个斑点。我想这与我正在使用的位置标签有关，但我不确定如何准确地重现。代码如下+ CSB：

https://codesandbox.io/s/eager-moore-qeki7

画廊

                   {
                    data.map((edge) => (
                        <div key={edge} className={styles.imgHov}>
                            <Img 
                                fluid={edge.node.data.one} 
                                className={styles.image}
                            />
                            <div className={styles.overlay} key={edge}>

                                <p className={styles.text}>{edge.node.data.item_one}</p>
                                <p className={styles.text}>{edge.node.data.item_two}</p>
                                
                            </div>

                        </div>
                    ))
                    }

css

.imgHov:hover{
    position: relative;
}

.image{
    width: 25vw;
    height: 25vw;
    object-fit: cover;
}

.overlay{
    position: absolute;
    z-index: 999;
    margin: 0 0;
    left: 0;
    right: 0;
    top: 40%;
    width: 60%; 
    background-color: pink;
    height: 60%;
    width: 25vw;
}

.overlay .text{
    color: white;
    font-family: Geomanist;
}

Answer 1

我把你的应用翻译成了普通的HTML，我想这应该能满足你的要求:)

​

.imgHov{
    position: relative;
        width: 25vw;
    height: 25vw;
}

.image{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay{
    display: none;
    position: absolute;
    z-index: 999;
    margin: 0 0;
    left: 0;
    right: 0;
    top: 40%;
    width: 60%; 
    background-color: pink;
    height: 60%;
    width: 25vw;
}

.overlay .text{
    color: white;
    font-family: Geomanist;
}

.imgHov:hover .overlay {
   display: block;
 }

<div class="imgHov">
  <img class="image" src="https://static.scientificamerican.com/sciam/cache/file/92E141F8-36E4-4331-BB2EE42AC8674DD3_source.jpg"/>
  <div class="overlay">
      <p class="text">item one</p>
      <p class="text">item two</p>
  </div>
</div>

​