css鼠标悬停背景图片变化,鼠标移入出现透明遮罩层

　　先看效果：

　　将鼠标移到图片上时，添加阴影效果+文字 / 图标。

　　实现的关键是CSSopacity和hover。本文还主要介绍了掩膜层的实现。

　　HTML:

　　class= img _ div img src= item . image _ base64 @ click= Delete img class= imgcss div class= mask H3 icon type= IOs-trash-outline size= 40 /icon/H3/div/div CSS:[Delete

　　我认为关键代码是父元素img_div要显示：block位置：相对；

　　子元素遮罩遮罩层位置：绝对；不透明度：0；指针事件：无；

　　鼠标悬停时的不透明度：1；

　　其他的可以根据业务需要进行改进。

　　需要指出的是，pointer-events:none旨在解决当存在mask图层的绝对定位时，点击图片无法触发事件的问题，比如代码中的deleteImg事件。img _ div { border-radius:10px；显示：块；位置：相对；} .imgCSS {身高：100%；宽度：100%；边框半径：10px显示：块；光标：指针；} .掩码{位置：绝对；背景：rgba(101，101，101，0.6)；颜色：# ffffff不透明度：0；top:0；右：0；宽度：100%；身高：100%；边框半径：10px指针事件：无；} .mask H3 { text-align:center；最高利润率：25%；} .img_div:悬停。遮罩{不透明度：1；}就是这样。这篇文章介绍了CSS鼠标悬停在图片上时添加遮罩层效果的实现。有关CSS鼠标悬停在图片上的遮罩层的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。