37.悬停时的图像叠加效果 & 鼠标光标渐变跟踪

悬停时的图像叠加效果

在悬停时显示一个图像叠加效果。

• 使用 ::before 和 ::after 伪元素分别创建叠加层的顶部和底部条。设置它们的 opacity、transform 和 transition 以产生所需的效果。
• 使用 <figcaption> 作为叠加层的文本。设置 display: flex、flex-direction: column 和 justify-content: center 以将文本居中到图像中。
• 使用 :hover 伪选择器来更新所有元素的 opacity 和 transform,并显示叠加层。

<figure class=