html - 在 HTML 中将图像置于文本之上

Question

我想要多张图片，当用户将鼠标悬停在每张图片上时，图片会消失，显示下面的文字。现在，图像会在悬停时消失，但文本始终保留在图像上方。

HTML

<table align="center" style="width: 90vw;margin-right: 10vw;margin-left: 10vw;">

    <tr>
        <th>
            <div class="inhabitantOne">
                <p>Test Text.  Test Text.  Test Text.  Test Text.</p>
                <img src="judas.jpg">
            </div>
        </th>
        <th>
            <div class="inhabitantTwo">
                <img src="cain.jpg">
            </div>
        </th>
        <th>
            <div class="inhabitantThree">
                <img src="Ganelon.jpg">
            </div>
        </th>
    </tr>

CSS

.inhabitantOne {
  background-color: #8592b2;
  border-radius: 2vw;
  height: 20vw;
  width: 20vw;
  text-align: center;
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  border-color: #505151;
}

.inhabitantOne img {
   height: 100%;
   width: 100%;
}


.inhabitantOne:hover img {
  opacity: 0.0;
}

Answer 1

将此添加到您的 CSS 中

p{
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
p:hover{
  text-indent: 0%;
  white-space: nowrap;
  overflow: visible;
}

或者如果你想针对每个 div 类使用这个:

.inhabitantOne p{

  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.inhabitantOne p:hover{
  text-indent: 0%;
  white-space: nowrap;
  overflow: visible;
}