html怎么给图片加颜色代码,如何使用HTML和CSS为图像添加彩色覆盖效果

我正在尝试为网页上的每个图像添加覆盖效果。基本上,当光标移动到图像上时,它会稍微改变颜色。然而,所期望的效果并没有发生。最好的解决方法是什么?

HTML格式

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;

}