CSS如何實(shí)現(xiàn)鼠標(biāo)移至圖片上顯示遮罩層效果

發(fā)布時(shí)間：2021-03-18 14:03:16 來源：億速云閱讀：503 作者：小新欄目：web開發(fā)

這篇文章主要介紹了CSS如何實(shí)現(xiàn)鼠標(biāo)移至圖片上顯示遮罩層效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

1、將遮罩層html代碼與圖片放在一個(gè)div

我是放在 .img_div里。

<div class="img_div">
    <img src="./images/paella-dish.jpg">
 
        <a href="#">
            <div class="mask">
               <h4>A Picture of food</h4>
                </div>
        </a>
</div>

2、為圖片及遮罩層添加樣式

圖片：relative

遮罩層：absolute

使兩者樣式重合。

鼠標(biāo)不在圖片上時(shí)，遮罩層不顯示 .mask { opacity: 0; } 。

.img_div {
    margin: 20px 400px 0 400px;
    position: relative;
    width: 531px;
    height: 354px;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 531px;
    height: 354px;
    background: rgba(101, 101, 101, 0.6);
    color: #ffffff;
    opacity: 0;
}
.mask h4 {
    text-align: center;
}

3、使用hover

改變透明度，使遮罩層顯示。

.img_div a:hover .mask {
    opacity: 1;           
}

效果圖：

CSS如何實(shí)現(xiàn)鼠標(biāo)移至圖片上顯示遮罩層效果

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS如何實(shí)現(xiàn)鼠標(biāo)移至圖片上顯示遮罩層效果”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

CSS如何實(shí)現(xiàn)鼠標(biāo)移至圖片上顯示遮罩層效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽