Te dejo dos ejemplos para crear un overlay
.
La idea es que envuelvas tu imagen dentro de un div
y a este div
le aplicas las propiedades de color y transparencia.
div {
height: 200px;
width: 200px;
background-color: rgba(0, 0, 100, 0.5);
overflow: hidden;
}
img {
object-fit: cover;
opacity: 0.5;
}
<div>
<img src="https://picsum.photos/200">
</div>
Con esta opción tienes un div
separado que se superpone a la imagen y a este le aplicas las propiedades:
.img-wrapper {
position: relative;
width: 200px;
font-size: 0;
}
.img-overlay {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 100 , 0.5);
}
.img-wrapper img {width: 200px;}
<div class="img-wrapper">
<div class="img-overlay"></div>
<img src="https://picsum.photos/200">
</div>
Cambia los tamaños para que se ajusten a tu necesidad.