如何为 HTML 和 CSS 的图像添加彩色叠加效果

Question

我正在尝试为网页上的每个图像添加叠加效果。基本上当光标在图像上移动时，它会稍微改变颜色。然而，期望的效果没有发生。解决此问题的最佳方法是什么？

这是上下文的网页图片。

HTML

    <div class="service-box">
        <div class="single-service">
            <img src="images/facials.PNG">
            <div class="overlay"></div>
        </div>
        <div class="single-service">
            <img src="images/skin_solutions.PNG"> 
            <div class="overlay"></div>  
        </div>
        <div class="single-service">
            <img src="images/lash.PNG">
            <div class="overlay"></div> 
        </div>
        <div class="single-service">
            <img src="images/microblading.PNG">
            <div class="overlay"></div> 
        </div>
        <div class="single-service">
            <img src="images/eyebrow_treatment.PNG">
            <div class="overlay"></div> 
        </div>
    </div>

CSS

.service-box{
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: auto;
}
.single-service{
    flex-basis: 50%; /*get two services in 1 row*/
    text-align: center;
    border-radius: 7px;
    margin-bottom: 20px;
    color: #fff;
    position: relative;
}
.single-service img{
    width: 85%; /*resize image*/
    border-radius: 7px;
}
.overlay{
    width: 100%
    height 100%;
    position: absolute;
    top: 0;
    border-radius: 7px;
    cursor: pointer;
    background: linear-gradient(rgba(0,0,0,0.5),#93dced);
    opacity: 0;
    transition: 1s;
}

.single-service:hover .overlay{
    opacity: 1;
}

Answer 1

您的代码运行良好，但 css、.overlay class 中存在技术错误。您在 width: 100% 之后跳过了 ;，并且在 height: 100%.

之间错过了 :

应该是这样的：

.overlay{
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    border-radius: 7px;
    cursor: pointer;
    background: linear-gradient(rgba(0,0,0,0.5),#93dced);
    opacity: 0;
    transition: 1s;
}

Answer 2

这将使您的图像在悬停时透明 60%。

  img:hover {
    background: linear-gradient(rgba(0,0,0,0.5),#93dced);
    opacity: 60%;
    transition: 1s;}

如何为 HTML 和 CSS 的图像添加彩色叠加效果

How to add colored overlay effect for images with HTML and CSS

html

css

overlay