CSS bewegen Sie den Mauszeiger über Thumbnails in WordPress

Ich versuche, ein Raster von Thumbnails in WordPress zu erstellen, was mir gelungen ist. Wenn der Benutzer dann mit der Maus über ein Bild fährt, möchte ich, dass es eine halbtransparente Farbe annimmt und den Beitragstitel darunter anzeigt. Ich denke, ich habe begonnen, mit dem Code etwas zu machen, aber derzeit erscheint der Hover-Over unter dem Bild und nicht über dem Thumbnail. Ich habe mich gefragt, ob mir jemand dabei helfen könnte? Ich denke, es ist das CSS, das das Problem ist. Ich habe es mit Position: absolut versucht, aber das bleibt nur an einer Stelle am oberen Rand des Rasters hängen.

<div id="gridContainer">
<?php
$c = 1; //init counter
$bpr = 3; //boxes per row
if(have_posts()) :
    while(have_posts()) :
        the_post();
?>


<div class="post" id="post-<?php the_ID(); ?>">


<div class="postImage">
<a href="https://stackoverflow.com/questions/7179412/<?php%20the_permalink();%20?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('grid-post-image'); ?></a>
</div>

<div class="hover">
                <h1 class="title"><a href="https://stackoverflow.com/questions/7179412/<?php%20the_permalink();%20?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
            </div>
            </div>


<?php
if($c == $bpr) :
?>
<div class="clr"></div>
<?php
$c = 0;
endif;
?>
<?php
        $c++;
    endwhile;
endif;
?>
<div class="clr"></div>
</div>

Und hier ist das CSS, das meiner Meinung nach geändert werden muss.

.post {
    float: left;
    width: 275px;
}

.clr {
    clear:both;
}


.hover {
      width: 275px;
   height: 185px;
    top: 0;
    z-index: 1;
        background: #fff;
      opacity:0;
}

.hover:hover{
      opacity:0.9;
}

<style>
    .postImage{position:relative;}
    .postImage>a{position:absolute; top:0; left:0; z-index:0;}
    .postImage>h1{display:none; position:absolute; top:50%; left:0; z-index:1;}
    .postImage:hover img{opacity:0.5;}
    .postImage:hover h1{display:block;}
</style>

Setzen Sie beide Elemente (image und h1) in dasselbe div

<div class="postImage">
    <a href="https://stackoverflow.com/questions/7179412/<?php%20the_permalink();%20?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('grid-post-image'); ?></a>
    <h1 class="title"><a href="https://stackoverflow.com/questions/7179412/<?php%20the_permalink();%20?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
</div>