Hover effect fiddle

by orph_c

HTML

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

CSS

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

JavaScript

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

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