黑色覆盖层，可穿透文字/图像

Question

我想实现以下效果：https://wildebeest.com.au/ enter image description here 这是一个视频背景（我已经拥有），上面有黑色覆盖层，当悬停在视频所显示的文本/图像上时，可以查看文本或图像。

我不知道该怎么做，我可以进行黑色覆盖，但不能看到透明文字或悬停。我正在使用带有divi主题/构建器的wordpress。

谢谢。

Answer 1

要实现此目的，首先，必须检查他们的操作方式：

他们使用SVG矢量格式https://magc.co/Ul7aQ

的覆盖图像

您可以使用Illustrator等一些设计工具来创建自己的SVG

该格式非常轻巧，然后用黑色背景的div填充它，所有这些都必须放在顶层（也许使用z-index）

其余的是CSS过渡，具体取决于鼠标的位置。