Grid Layout Image Issues

Hello all,

I have been working on a grid layout for a blog (just square images, with a hover state).

The problem is, the image size I have chosen and registered in functions isn’t working and the full size image is showing up and messing up the page.

I’ve regen’d the thumbnails with AJAX rebuild thumbnails plugin, but still the problem persists.

The temp page is here:

https://thehub-pr.co.uk/grid-3/

And here is loop:

<?php if (have_posts()): ?>

<?php while (have_posts()) : the_post(); ?>

<div class="birdcage">
    <?php the_post_thumbnail('grid-pic'); ?>
    <img class="top" src="../wp-content/themes/TheHubPR/images/grid_cover.png" />
    <div class="text"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></div>
</div>

<?php endwhile; ?>

<?php else: ?>

<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>

<?php endif; ?>

and add_image in functions (which is being seen by the AJAX thumbnail regen plugin as it made the image):

if ( function_exists( 'add_image_size' ) ) {
	add_image_size( 'grid_pic', 205, 205, true ); //300 pixels wide (and unlimited height)
}

And the CSS for the grid:

.birdcage {
    background:#f00;
    float:left;
    position:relative;
    width:205px;
    height:205px;
    margin-right: 5px;
    margin-bottom: 5px;
}
.top {
    position:absolute;
    top:0;
    left:0;
        visibility:hidden;
}
.birdcage:hover .top {
/*    z-index:-1;           /* use this */
    visibility:visible;    /*  or this */
/*    left:-9999px;         /*  or this */
}
.text {
    color:#fff;
    padding: 5px;
    position: absolute;
    top: 90px;
    width: 195px;
    text-align: center;

}

Any help would be greatly appreciated!

Thanks

MC