Javascript 在透明覆盖中显示文本

我有一个图像，我让它在点击时透明，这样它就能显示背景，产生叠加的错觉

我还想在背景的中心显示一些文本，这样当背景显示时它就会出现，怎么做

预期：

代码笔：

代码：

更新1:

在网格中编码打开多个图像

---

这应该行得通。如果你有任何问题，请告诉我。如果希望更好地匹配参考图像，还可以添加边框

$（'.imageDiv'）。单击（函数（）{
$（'img'）.addClass（“棘手的图片”）；
$（“.text”）.css（“显示”、“内联”）；
});
.imageContainer{
位置：相对位置；
文本对齐：居中；
颜色：黑色；
最大宽度：200px；
最大高度：200px；
}
.u图像{
-moz转换：所有1；
-webkit转换：所有1；
-ms转换：所有1s；
-o-过渡：所有1s；
过渡：所有1；
不透明度：0.5；
过滤器：α（不透明度=20）；
}
.文本{
显示：无；
位置：绝对位置；
最高：50%；
左：50%；
不透明度：1；
转换：翻译（-50%，-50%）；
}

此处文本
sample，您好，我已经添加了您的代码并做了一些修改（原始问题更新1中的codepen），但没有显示文本。你可以调查一下吗？泰，我40分钟后有时间再看。然而，当我试图建立声誉时（我是新来的），我会问，既然我回答了最初的问题，它应该被标记为正确。谢谢你的样品，你今天可以看一下吗？我已经在15小时前更新过了。。。你没看到新的部分吗？嗯，我不是那个否决它的人，但是如果你想的话，我可以把你的问题投上去。我认为他们否决它的原因是因为您对代码使用了外部沙盒（而不是代码片段）。你也应该在提问前展示你所做的研究，这样人们就不会认为你是在让他们为你工作。这就是说，如果你问得对，我可能不是唯一一个回答这个问题的人，因此也不一定被标记为正确，所以我会投赞成票。下次写一个更好的问题，会有更多的人回答。
$('.tricky').click(function(){
    $('img').addClass("tricky_image");
});