img文件按下以悬停。我怎么能正确地显示悬停在图像上并悬停

Question

截图：

img文件按下以悬停。我怎样才能正确显示悬停在图像上并将鼠标悬停在图像上？

<div class="colunm5">
        <img src="images/picture1.jpg">
        <p class="colunm5_centered">aaaa</p>
    </div>

.colunm5 {
    width:340px;
    height:378px;
    border: 1px solid #000000;
    display:inline-block;
    position: relative;
    bottom:155px;
}

.colunm5_centered {
    width:340px;
    height:378px;
    vertical-align: top;
    margin: 0;
    text-align: center;
}

.colunm5_centered{
    visibility: hidden;
}
.colunm5:hover .colunm5_centered {
background-color:rgba(0,0,0,0.3);
visibility:visible;

}

Answer 1

您的问题不太清楚，但我猜您希望部分透明的p出现在与图像相同的位置，重叠，是吗？ 在这种情况下，你需要做的就是绝对定位p，因为它的父元素已经相对定位了。

position: absolute;
left: 0; top: 0;

段：

＆＃13;

＆＃13;

.colunm5 {
  width: 340px;
  height: 378px;
  border: 1px solid #000000;
  display: inline-block;
  position: relative;
  bottom: 155px;
}
.colunm5_centered {
  width: 340px;
  height: 378px;
  position: absolute;
  left: 0; top: 0;
  margin: 0;
  text-align: center;
  visibility: hidden;
}
.colunm5:hover .colunm5_centered {
  background-color: rgba(0, 0, 0, 0.3);
  visibility: visible;
}

＆＃13;

<div class="colunm5">
  <img src="http://i.stack.imgur.com/8w571.png">
  <p class="colunm5_centered">aaaa</p>
</div>

＆＃13;

＆＃13;

＆＃13;

请注意，我必须更改图片网址才能看到我们能看到的内容。