Transform Scale & Background Color On Hover - html

Question

I am trying to do something that's fairly straightforward and I've been looking through many examples but can't seem to get this to work as I expect. What I am trying to do if have an image that on hover will scale(1.1) and then add a background-color also. As you can see I have no problem with selecting the image within the image-holder that I created and scaling this on hover but then when I try to add the overlay to this and get that to add on hover it doesn't work. I attached the code below
<div class="image-holder">
<img src="https://cdn2.artbees.net/jupiter5/orthosie/wp-content/uploads/sites/51/bfi_thumb/portfolio-feature-07-msnw0wxnyitxdmhlcfsb7elky0xl4drzq8bc37266o.jpg" width="300" height="200">
<div class="image-overlay"></div>
</div>
.image-holder {
position: relative;
max-width: 33.333%;
float: left;
overflow: hidden;
}
.image-holder img {
width: 100%;
vertical-align: top;
transition: all 0.5s;
z-index: 2;
}
.image-holder:hover img {
transform: scale(1.1);
}
.image-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.9);
opacity: 0;
z-index: 5;
}
.image-overlay:hover > img {
opacity: 1;
}