Black transparent overlay on image hover with only CSS?

Black transparent overlay on image hover with only CSS?

I'm trying to add a transparent black overlay to an image whenever the
mouse is hovering over the image with only CSS. Is this possible? I tried
this:
http://jsfiddle.net/Zf5am/565/
But I can't get the div to show up.
<div class="image">
<img
src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg"
alt="" />
<div class="overlay" />
</div>
.image { position: relative; border: 1px solid black; width: 200px;
height: 200px; }
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; display: none;
background-color: red; z-index: 200; }
.overlay:hover { display: block; }