Change Opacity of an HTML Element

I am attempting to create an overlay which is displayed when a graphic on an HTML canvas element is clicked. My current problem is changing the CSS opacity of the overlay element.

To do this I am using the two CSS classes below:

.Overlay {
  opacity: 0.5;
  background: BLUE;
}
.Overlay-Open {
  opacity: 1;
  background: RED;
}

and changing the class by using javascript:

document.getElementById("Node-Data").setAttribute("class","Overlay-Open");

I am slowly going insane, because I can not understand why the background colour changes, but not the opacity. Can someone lend me some of their wizardly knowledge to debug this issue? I will provide more code if needed.