CSS完成电脑鼠标挪到照片上显示信息遮罩层实际

2020-10-15 00:32 jianzhan

1、将遮罩层html编码与照片放在1个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

使二者款式重叠。

电脑鼠标不在照片上时,遮罩层无法显示 .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;           
}

实际效果图:

总结

以上所述是网编给大伙儿详细介绍的CSS完成电脑鼠标挪到照片上显示信息遮罩层实际效果,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!