CSS图像和文本问题

Question

我试图隐藏div class="caption"中的文本，其中图像位于class="img"的顶部，但在转换结束时，文本位于图像的顶部。我尝试了"overflow: hidden;"和"overflow: visible"，但它只在动画开始时起作用。

.img {
position: relative;
margin: 50px;
transition: transform 0.4s;
border-radius: 85px;
}
li:hover .img {
overflow: visible;
cursor: pointer;
transform: scale(1.3) translate(0px, -80px);
z-index: 100;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.525);
border-radius: 85px;
}

/*CAPTION AND GAME TITLE*/
.caption {
overflow: hidden;
margin-top: -150px;
transition: transform 0.5s;
transition: 0.4s;
opacity: 0;
}
li:hover .caption {
overflow: hidden;
opacity: 1;
transform: scale(1.3) translate(0px, 70px);
}

<div class="container">
<ul>
<li>
<a href="games/tictactoe.html"><img id="picture" class="img" src="https://picsum.photos/100/100" alt="TicTacToe"></a>
<div class="caption">
<h3 class="gametitle">Tic Tac Toe</h3>
<h2>Game for two players</h2>
</div>
</li>
<li>
<a href="games/battleship.html"><img class="img" src="https://picsum.photos/100/100" alt="battleShip"></a>
<div class="caption">
<h3 class="gametitle">Battle Ship</h3>
<h2>Game for two players</h2>
</div>
</li>
<li>
<a href="games/pythagoreantable.html"><img class="img" src="https://picsum.photos/100/100" alt="pythagoreantable"></a>
<div class="caption">
<h3 class="gametitle">Pythagorean Table</h3>
<h2>Tool</h2>
</div>
</li>
</ul>
</div>

Answer 1

转换标题时，它将成为堆栈上下文的根元素，并且由于它位于a标记(.img的父标记(之后，因此它将覆盖图像。

将a设置在.caption:之上

a {
position: relative;
z-index: 1;
}

.img {
position: relative;
margin: 50px;
transition: transform 0.4s;
border-radius: 85px;
}
a {
position: relative;
z-index: 1;
}
li:hover .img {
overflow: visible;
cursor: pointer;
transform: scale(1.3) translate(0px, -80px);
z-index: 100;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.525);
border-radius: 85px;
}

/*CAPTION AND GAME TITLE*/
.caption {
overflow: hidden;
margin-top: -150px;
transition: transform 0.5s;
transition: 0.4s;
opacity: 0;
}
li:hover .caption {
overflow: hidden;
opacity: 1;
transform: scale(1.3) translate(0px, 70px);
}

<div class="container">
<ul>
<li>
<a href="games/tictactoe.html"><img id="picture" class="img" src="https://picsum.photos/100/100" alt="TicTacToe"></a>
<div class="caption">
<h3 class="gametitle">Tic Tac Toe</h3>
<h2>Game for two players</h2>
</div>
</li>
<li>
<a href="games/battleship.html"><img class="img" src="https://picsum.photos/100/100" alt="battleShip"></a>
<div class="caption">
<h3 class="gametitle">Battle Ship</h3>
<h2>Game for two players</h2>
</div>
</li>
<li>
<a href="games/pythagoreantable.html"><img class="img" src="https://picsum.photos/100/100" alt="pythagoreantable"></a>
<div class="caption">
<h3 class="gametitle">Pythagorean Table</h3>
<h2>Tool</h2>
</div>
</li>
</ul>
</div>