Estoy tratando de crear una cuadrícula de miniaturas en WordPress, lo que he logrado hacer. Luego, cuando el usuario pasa el cursor sobre una imagen, quiero que tenga un color semitransparente y muestre el título de la publicación debajo. Creo que he comenzado a hacer algo con el código, pero en este momento el cursor aparece debajo de la imagen en lugar de encima de la miniatura. Me preguntaba si alguien podría ayudarme con esto. Creo que es el CSS el problema. Intenté posición: absoluta, pero eso se queda en un lugar en la parte superior de la cuadrícula.

<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="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('grid-post-image'); ?></a>
</div>

<div class="hover">
                <h1 class="title"><a href="<?php the_permalink(); ?>" 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>

Y aquí está el CSS, que es lo que creo que debe modificarse.

.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;
}