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

文章预览

悬停时的图像叠加效果 在悬停时显示一个图像叠加效果。 使用 ::before 和 ::after 伪元素分别创建叠加层的顶部和底部条。设置它们的 opacity 、 transform 和 transition 以产生所需的效果。 使用 作为叠加层的文本。设置 display: flex 、 flex-direction: column 和 justify-content: center 以将文本居中到图像中。 使用 :hover 伪选择器来更新所有元素的 opacity 和 transform ,并显示叠加层。 < figure   class = "hover-img" >    < img   src = "https://picsum.photos/id/200/440/320.jpg" />    < figcaption >      < h3 > 悬停 < br /> 文本 h3 >    figcaption > figure > .hover-img  {    background-color :  #000 ;    color :  #fff ;    display : inline-block;    margin :  8px ;    max-width :  320px ;    min-width :  240px ;    overflow : hidden;    position : relative;    text-align : center;    width :  100% ; } .hover-img  * {    box-sizin ………………………………