CSS hover Slider - Unable to complete - html

Question

I want to do the following hover slider:
The blue part should slide from left to right when hovered on the red part. It should slide from the right part of the red part and not showing (i.e. should be sliding behind the red part). Blue part should initially be hidden behind the red and should not show at all The blue part will be bigger than the red part so it had to be hidden with overflow or something else. There should be no opacity transitioning, however other transitioning is acceptable
This is what I have thus far:
HTML:
<div class="container">
<div class="static-content">
</div>
<div class="overlay">
OverLay Content - this will be some text
</div>
</div>
CSS:
.container {
position: relative;
width: 200px;
height: 100px;
.static-content {
display: block;
background-color: red;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
right: 0;
background-color: #008CBA;
height:100%;
width: max-content;
transition: .5s ease;
}
}
.container:hover .overlay {
transform: translateX(100%);
height: 100%;
}
Problem is blue part is infront of red part.

Answer 1

add this to .overlay element z-index: -1; to make it behind the red
div
and if the red div is smaller so it doesnt hide it all then u can but transparent colored div at the part that u want to hide since u dont want to do it with overflow

Answer 2

You can give your blue div style a z-index to take it under the red one like this :
.overlay {
position: absolute;
z-index: -1;
top: 0;
right: 0;
background-color: #008CBA;
height:100%;
width: max-content;
transition: .5s ease;
}