overlay, hover

I'm using wordpress and I've set it so whenever the user creates a new post with a featured image, that image displays on the front page. What I am trying to accomplish is that when the user hovers over that image , it will overlay a black bg. I thought my HTML was written in a way I could easily accomplish this, but I am having trouble figuring it out, and don't know how to proceed. Thoughts? (CSS is bare since nothing I've done has yielded any results)

<div class="main top top-fix over" role="main">
	<div class="over">
		<!-- Display featured images -->
		<?php 

Hi all!

First time post here. First, thanks for all your time you are putting in for answering newbies like me!

Second - I am curious if you have a hint how can I achieve this effect of overlaying while hovering over the 6 images in the middle of the page of this STarbucks page:

http://www.starbucks.com/?gclid=CIOT-5Dmj6cCFYa7Kgodmh25cg

I tried a copy and paste the css section but I wasn't able to make it work independently. Any idea what I might be missing?

Here is my test page: http://www.gabtone.com/test.htm

Thank you!

Gabstero