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

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;] 那么有没有办法把中心的不透明度设置为 1 当我在 atp:hover{} 代码块中？

希望一切顺利，提前致谢！

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>

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

Make a paragraph appear inside a picture on picture hover

html

css

image

hover