How to create an overlay that appears on hover with the HTML structure below?

Right now, I'm creating an overlay div and a content div with the structure below, where the overlay div is above the content div and is absolutely positioned. I'm rendering the content of the overlay and content div with Django variables, and, in my actual code these are being created using a for loop, to render everything on the page.

When the user hovers over a specific content div, I want the corresponding overlay div to appear on top of it. So basically, if the user hovers over object 1, I only want the overlay for object 1 to show up, then once the mouse leaves the object, I want the overlay to disappear. Right now, this is being done through Javascript and onmouseover and onmouseout. However, as you can see with the fiddle below, the onmouseover is working but the onmouseout is not (I also tried onmouseleave but it also doesn't work). So, what am I doing wrong here? Also, if this doesn't work, can someone suggest any more methods where I can get the hover to work, without changing the HTML structure (I still want the overlay div first, and then the content div second, since when I changed the structure of the code, my styling completely messed up)?

I set up one basic element, and it pretty much is how my code looks except I'm using a for loop to render multiple elements, and there is actual content, not just text. But, the onmouseout doesn't work here as well.

function showstatus(object) {
    object.style.opacity = "1";
}

function normalize(object) {
    object.style.opacity="0";
}

#overlay {
    background: rgba(255, 255, 255, 0.75);
    position: absolute;
    opacity: 0;
    width: 100%;
}

<div>
  <div id="overlay" onmouseover="showstatus(this)" onmouseout="normalize(this)">
    <h2>Overlay</h2>
  </div>
  <div style="background: blue;">
    <h1>Actual content</h1>
  </div>
</div>

Here's a fiddle as well

Solution

I'm not sure why but when i changed the name of the normalize function it started working. like this:

function showstatus(object) {
    object.style.opacity = "1";
}

function out (object){
 object.style.opacity="0";
}

#overlay {
    background: rgba(255, 255, 255, 0.75);
    position: absolute;
    opacity: 0;
    width: 100%;
}

<div>
  <div id="overlay" onmouseout="out(this)" onmouseover="showstatus(this)" >
    <h2>Overlay</h2>
  </div>
  <div style="background: blue;">
    <h1>Actual content</h1>
  </div>
</div>

probably it's because of this : https://www.w3schools.com/jsref/met_node_normalize.asp