I'm trying to hide the texts in the div class="caption" with the image on top of them class="img", but while the transition is ending, the text goes on top of the image. I tried with "overflow: hidden;" and "overflow: visible", but it works only at the beginning of the animation.
.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>
