如何将悬停效果中的文本淡入淡出应用于表格中的图像?

Question

我正在尝试在将鼠标悬停在表格中的图像上时添加文本淡入淡出的效果。我已经让它自己处理图像，但是当我尝试将其应用于表元素时，它不起作用。当我将鼠标悬停在图像上时，没有任何反应。我觉得我安排错了什么。在表格中做不到吗？

代码如下：

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>

小提琴： https://jsfiddle.net/megmun/f7esrn0t/

Answer 1

最大的问题是在TD元素周围放置div。 css 几乎没问题，但这里有一个提示：

位置：绝对元素将限制在其他位置非静态元素(相对、其他绝对和固定(中，因此对于包含绝对叠加的TD，它必须是相对的。

.grid {
text-align: center;
margin-left: auto;
margin-right: auto;
border-spacing: 50px;
border-collapse: separate;
}
.grid td {
position: relative;
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: opacity .5s ease;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
background-color: #008CBA;
z-index: 1000;
}
.grid td:hover .overlay {
opacity: 1;
}
.text {
color: black;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);  
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

<table class="grid">
<tr>
<th>Cat 1</th>
<th>Cat 2</th>
<th>Cat 3</th>
</tr>
<tr>
<td>
<img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2012/11/91615172-find-a-lump-on-cats-skin-632x475.jpg" height="150px" width="150px" />
<div class="overlay">
<div class="text">Overlay Text</div>
</div>
</td>
<td><img src="https://static1.squarespace.com/static/53a096cce4b00d7644776a0b/562b9546e4b016f977a96bd7/562b975fe4b01024eb5d7267/1445697377179/Shake_11_Lil+Bub.jpg?format=1500w" height="150px" width="150px" /></td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg" height="150px" width="150px" /></td>
</tr>
</table>

编辑：

忘了提：您还必须注意供应商特定的属性，例如转换和转换。