How can I implement a text fade in effect when hovering over images within a table? I've managed to achieve this for individual images, but when attempting to apply it to the table itself, the effect does not work. There seems to be an error in my arrangement. Is it not possible to accomplish this within a table?
Below is the code snippet:
table {
text-align: center;
margin-left: auto;
margin-right: auto;
border-spacing: 50px;
border-collapse: separate;
}
td {
max-width: 150px;
max-height: 150px;
text-align: center;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: black;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}<table>
<tr>
<th>Cat 1</th>
<th>Cat 2</th>
<th>Cat 3</th>
</tr>
<tr>
<div class="container">
<td class="cat1"><img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2012/11/91615172-find-a-lump-on-cats-skin-632x475.jpg" height="150px" width="150px"></td>
<div class="overlay">
<div class="text">Overlay Text</div>
</div>
</div>
<td class="cat2"><img src="https://static1.squarespace.com/static/53a096cce4b00d7644776a0b/562b9546e4b016f977a96bd7/562b975fe4b01024eb5d7267/1445697377179/Shake_11_Lil+Bub.jpg?format=1500w" height="150px" width="150px"></td>
<td class="cat3"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg" height="150px" width="150px"></td>
</tr>
</table>