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