Colour Overlay + Fade - css

Question

So I have a tumblr blog and I'd like to set it up so that all the image posts by default have a colour overlayed over the top (almost transparent) and then when you hover over it, it fades out completely to show the image's original colours.
I've been looking for the right code but can't get anything to work. The below code successfully fades out from grayscale, but I don't want grayscale. I'm looking for something that will let me add a solid colour but transparent, and then fade that out. Any ideas? ;A;
(the img is the property used for tumblr images in this CSS code)
img {
-webkit-filter: grayscale(100%);
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
img:hover {
-webkit-filter: grayscale(0%);
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
<img src="http://i0.kym-cdn.com/photos/images/original/001/285/460/8b6.jpg" width="300px"></img>

Answer 1

Try this: https://jsbin.com/guyudiqafi/edit?html,css,output
HTML:
<div class="image-container">
<img src="https://c.tadst.com/gfx/1200x630/sunrise-sunset-sun-calculator.jpg?1">
</div>
CSS:
.image-container {
width: 300px;
position: relative;
}
.image-container:after {
background: #0043ff;
opacity: 0.3;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
content: ' ';
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
.image-container:hover:after {
opacity: 0;
}
img {
display: block;
width: 100%;
}

Answer 2

You can achieve what you want to using CSS pseudo-element :after.
See docs: https://www.w3schools.com/css/css_pseudo_elements.asp
See working example below:
.img-wrapper {
position:relative;
display: inline-block;
width: 32%;
}
.img-wrapper img{
width: 100%;
}
.img-wrapper:after {
position:absolute;
display: block;
height: 100%;
width: 100%;
content: '';
background-color: #ff0000;
top: 0;
left: 0;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
opacity: 1;
}
.img-wrapper.opacity:after {
opacity: 0.3;
}
.img-wrapper.rgba:after {
background-color: rgba(250,0,0,.3);
}
.img-wrapper:hover:after {
opacity: 0;
}
<div class="img-wrapper">
<img src="https://i.pinimg.com/600x/0b/87/f4/0b87f4eb50b3d7a7c9d70d97234753ab.jpg">
</div>
<div class="img-wrapper opacity">
<img src="https://i.pinimg.com/600x/0b/87/f4/0b87f4eb50b3d7a7c9d70d97234753ab.jpg">
</div>
<div class="img-wrapper rgba">
<img src="https://i.pinimg.com/600x/0b/87/f4/0b87f4eb50b3d7a7c9d70d97234753ab.jpg">
</div>