Title: Grid Layout Image Issues
Last modified: August 20, 2016

---

# Grid Layout Image Issues

 *  [mikechalmers](https://wordpress.org/support/users/mikechalmers/)
 * (@mikechalmers)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/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:
 * [http://thehub-pr.co.uk/grid-3/](http://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

The topic ‘Grid Layout Image Issues’ is closed to new replies.

## Tags

 * [functions](https://wordpress.org/support/topic-tag/functions/)
 * [grid](https://wordpress.org/support/topic-tag/grid/)
 * [hover](https://wordpress.org/support/topic-tag/hover/)
 * [image](https://wordpress.org/support/topic-tag/image/)
 * [layout](https://wordpress.org/support/topic-tag/layout/)
 * [register](https://wordpress.org/support/topic-tag/register/)
 * [rollover](https://wordpress.org/support/topic-tag/rollover/)
 * [size](https://wordpress.org/support/topic-tag/size/)

 * 0 replies
 * 1 participant
 * Last reply from: [mikechalmers](https://wordpress.org/support/users/mikechalmers/)
 * Last activity: [13 years, 8 months ago](https://wordpress.org/support/topic/grid-layout-image-issues/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics