使段落出现在图片悬停在图片内

Question

基本上我想要做的是：有一幅图片，当有人将鼠标悬停在它上面时，我希望一些文字出现在它的位置（准确地说是在中间）。到目前为止，我所做的是使图片在悬停时消失，但是我无法使文本出现。.

HTML：

<div class="container">
<img id="atp "class="atp" src="atp.jpg">
    <div class="center">Some text</div>
</div>

Css：

atp{
display:block;
margin-left:auto;
margin-right:auto;
width:27%;
height:50%;}



container{
position: relative;
text-align: center;

}

.center{
position: absolute;
top:50%;
left:50%;
opacity: 0;

}

所以基本上，我想做的是.atp:hover{opacity:0;}，我还想要在atp的鼠标悬停.center{opacity:1;]上，所以当我在atp:hover{}代码中时，有没有办法将中心的不透明度设置为1阻止？

希望一切都很好，在此先感谢！

Answer 1

  #atp {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 27%;
    height: 50%;
    z-index: 50;
}

.container {
    position: relative;
    text-align: center;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 30;
}

#atp:hover {
    opacity: 0;
}

请尝试使用z-index。它与我合作：）

Answer 2

这里是代码。希望对您有帮助。如果有任何更改，请通知我。

/********* Simple or original overlay *******/
/* Main container */
.overlay-image {
 position: relative;
 width: 100%;
}
/* Original image */
.overlay-image .image {
 display: block;
 width: 100%;
 height: auto;
}
/* Original text overlay */
.overlay-image .text {
 color: #fff;
 font-size: 30px;
 line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}
/********* Overlay on hover *******/
/* New overlay on hover */
.overlay-image .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: .5s ease;
}
/* New overlay appearance on hover */
.overlay-image:hover .hover {
 opacity: 1;
}

/********* Background and text only overlay on hover *******/
.overlay-image .normal {
 transition: .5s ease;
}
.overlay-image:hover .normal {
 opacity: 0;
}
.overlay-image .hover {
 background-color: rgba(0,0,0,0.5);
}

<div class="overlay-image">
  <a href="LINK_URL"> 
     <div class="normal">
        <div class="text">Image + text ORIGINAL</div>
     </div>
     <div class="hover">
        <img class="image" src="https://dummyimage.com/200x150/00ccff/fff.png" alt="Alt text hover" />
     </div>
  </a>
</div>