CSS 鼠標(biāo)懸浮在圖片上添加遮罩層效果的實現(xiàn)

發(fā)布時間：2020-12-17 09:29:17 作者：qwe122343

我要評論

這篇文章主要介紹了CSS 鼠標(biāo)懸浮在圖片上添加遮罩層效果的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

先看效果：

一個大的圖片墻在這里插入圖片描述

鼠標(biāo)移在圖片上時，添加陰影效果+文字 / 圖標(biāo)

在這里插入圖片描述

實現(xiàn)的關(guān)鍵是 CSS 的 opacity 和 hover，本文也主要介紹遮罩層的實現(xiàn)
HTML:

<div class="img_div">
   <img src="item.image_base64" @click="deleteImg" class="imgCSS">
   <div class="mask">
     <h3><Icon type="ios-trash-outline" size="40"></Icon></h3>
   </div>
 </div>

CSS:【刪除了一些和上圖實現(xiàn)無關(guān)的代碼】

我覺得重點代碼是
父級元素 img_div 要display: block;position: relative;
子級元素 mask 遮罩層 position: absolute;opacity: 0;pointer-events:none;
鼠標(biāo)懸浮時 opacity: 1;
其他大家都可根據(jù)業(yè)務(wù)需要進(jìn)行改進(jìn)

需要指出的是 pointer-events:none 目的是解決有遮罩層絕對定位時，點擊圖片無法觸發(fā)事件，比如代碼中的 deleteImg 事件

.img_div {
    border-radius: 10px;
    display: block;
    position: relative;
  }
  .imgCSS {
    height: 100%;
    width: 100%;
    border-radius: 10px;
    display: block;
    cursor: pointer;
  }
   .mask {
   position: absolute;
   background: rgba(101, 101, 101, 0.6);
   color: #ffffff;
   opacity: 0;
   top: 0;
   right: 0;
   width: 100%;
   height: 100%;
   border-radius: 10px;
   pointer-events:none;
 }
  .mask h3 {
    text-align: center;
    margin-top: 25%;
  }
  .img_div:hover .mask {
    opacity: 1;
  }

到此這篇關(guān)于CSS 鼠標(biāo)懸浮在圖片上添加遮罩層效果的實現(xiàn)的文章就介紹到這了,更多相關(guān)CSS 鼠標(biāo)懸浮圖片遮罩層內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！