Hover Content over Featured Image

Hi Folks,

I’m pretty sure what I’m trying to do is possible with CSS but I’m really struggling. I could be missing something really obvious but I’ve tried various things, tutorials, support threads etc that are doing something similar and tried reworking them to work this way.

What I am trying to do is call a series of posts from a category to display the post thumbnail, then when you hover over the thumbnail the post title and excerpt show up over the top. I have no problem calling the thumbnails (which auto link to the post). I can also call the title and excerpt on hover of the image, but they appear below the image rather than on top! The best working code I have is below but i think more is needed. Can an expert help?

CSS –

.itemcontainer {position: relative;}
.hoverbackground .hovercontent{position: absoloute;top: 0px;left: 0px;}
.hoverbackground {height: 100%;width: 100%;}
.hoverbackground .hovercontent {background: #222222;width:98%;height:98%;padding: 1%;display:none;z-index:10;}
.hoverbackground:hover .hovercontent {display: block;}

Template-
Runs query posts array then:

// The Loop
while ( have_posts() ) : the_post();
echo('<div class="itemcontainer alignleft threecolhome">');
echo('<div class="hoverbackground">');
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail(
'home_promo', // image size
array('class' => 'someclass',           // add css class This isn't in use at the moment but i think i need to do something here?
)); }
echo('<div class="hovercontent"'); echo('<h3>'); the_title(); echo('</h3>'); the_excerpt();
echo('</div> </div> </div>');   // close all divs

Thanks in advance – Matt
(currently working locally so can’t post a link to the site)