Zoom and Transparant Color Overlay Mouseover CSS - html

Question

I have this piece of code where it's zooming in the image on cursor hover. However, I do also wish to add a transparent color overlay in RGB or Hex, how can I add this to the following code?
.hover-zoom-in .fl-photo-content {
overflow: hidden;
}
.hover-zoom-in .fl-photo-content .fl-photo-img {
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
will-change: transform;
}
.hover-zoom-in .fl-photo-content .fl-photo-img:hover {
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
Thank you in advance!

Answer 1

I think you are looking for something like this:
.outer {
display: inline-block;
}
.outer .image {
position: relative;
display: inline-block;
transform: scale(1);
transition: transform 0.5s ease 0s;
}
.outer .image img {
width: 500px;
}
.outer .image::before {
position: absolute;
top: 0;
left: 0;
display: none;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, .6);
content: '';
}
.outer .image:hover {
transition: transform 0.5s ease 0s;
transform: scale(1.1);
}
.outer .image:hover::before {
display: block;
}
<div class="outer">
<div class="image">
<img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/242ce817-97a3-48fe-9acd-b1bf97930b01/09-posterization-opt.jpg" alt="">
</div>
</div>