如何将悬停叠加应用于包含 4 个独立图像映射的 2 x 2 网格?

Question

我想添加这种类型的悬停文本叠加： https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

到如下所示的图像网格： https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2016/03/1456867697gridlayout05.jpg

HTML和CSS会是什么样子？当我尝试添加一个悬停叠加层时，我的图像网格最终中断，图像开始堆叠在一起。

Answer 1

要做到这一点，你可以使用CSS2 Float概念轻松做到这一点。只需在第 1 行div 中获取推文和回复部分，并将带有 clearfix 的左浮动添加到推文和带有右浮动的回复。然后来到下一行，即第 2 行，同样将带有 clearfix 的左浮动添加到搜索和带有右浮动的邮件。这将使用 CSS2 完成工作。还有其他方法也可以使用 CSS3，但我发现这里的这种方法易于使用。