CSS實(shí)現(xiàn)鼠標(biāo)移至圖片上顯示遮罩層效果
發(fā)布時(shí)間：2019-11-20 14:16:55 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS實(shí)現(xiàn)鼠標(biāo)移至圖片上顯示遮罩層效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
1、將遮罩層html代碼與圖片放在一個(gè)div
我是放在 .img_div里。
<div class="img_div">
<img src="./images/paella-dish.jpg">
<a href="#">
<div class="mask">
<h3>A Picture of food</h3>
</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 h3 {
text-align: center;
}
3、使用hover
改變透明度，使遮罩層顯示。
.img_div a:hover .mask {
opacity: 1;
}
效果圖：
總結(jié)
以上所述是小編給大家介紹的CSS實(shí)現(xiàn)鼠標(biāo)移至圖片上顯示遮罩層效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
使用CSS content的attr實(shí)現(xiàn)鼠標(biāo)懸浮提示（tooltip）效果
這篇文章主要介紹了使用CSS content的attr實(shí)現(xiàn)鼠標(biāo)懸浮提示（tooltip）效果,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
CSS實(shí)現(xiàn)鼠標(biāo)懸浮無(wú)限向下級(jí)展示的實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了CSS實(shí)現(xiàn)鼠標(biāo)懸浮無(wú)限向下級(jí)展示的實(shí)例代碼，需要的朋友參考下吧2017-09-07CSS鼠標(biāo)懸浮DIV后顯示DIV外的按鈕解決方法
昨天寫樣式遇到個(gè)問題，如何讓鼠標(biāo)懸浮DIV后，顯示DIV外的按鈕，可以點(diǎn)擊到按鈕。下面通過(guò)本文給大家分享CSS鼠標(biāo)懸浮DIV后顯示DIV外的按鈕解決方法，感興趣的朋友一起看看2017-08-26
CSS3制作了一個(gè)動(dòng)畫導(dǎo)航效果(鼠標(biāo)懸浮會(huì)放大)
使用了CSS3的animation、transform、transition制作了一個(gè)動(dòng)畫導(dǎo)航效果，其中利用了Ligature Icon UI制作了導(dǎo)航中的ICON圖標(biāo),需要了解的朋友可以參考下2012-12-27
這篇文章主要介紹了css實(shí)現(xiàn)縷空遮罩層的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2020-06-03
這篇文章主要介紹了css3遮罩層鏤空效果的多種實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-05-11
CSS實(shí)現(xiàn)帶遮罩層可關(guān)閉的彈窗效果
這篇文章主要介紹了CSS實(shí)現(xiàn)帶遮罩層可關(guān)閉的彈窗效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-09
CSS 鼠標(biāo)懸浮在圖片上添加遮罩層效果的實(shí)現(xiàn)
這篇文章主要介紹了CSS 鼠標(biāo)懸浮在圖片上添加遮罩層效果的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-17
