Product Image Row Increase w/Mouse-over

I have an issue with the Mouse-over feature for the products pictured on the index page.

My layout is 4 columns by 4 rows. When the Mouse-over effect occurs in a column 4 product/image (with the exception of Row 4, Column 4 item), the page length increases by 1 row.

+ 1 – 2 – 3 – 4
1 a – b – c – d
2 e – f – g – H
3 i – j – k – l
4 m – n – o – p

So in the above diagram, if product “H” (Row 2, Column 4) is moused-over, the resultant page layout displays as diagrammed below:

+ 1 – 2 – 3 – 4
1 a – b – c – d
2 e – f – g – H
3 * – * – * – i
4 j – k – l – m
5 n – o – p – *

As soon as the “H” product is moused-over (or the “d” product or “i” product for that matter), it “bumps” open 3 empty product spaces in columns 1, 2 and 3.

In the second diagram the asterisks ” * ” represent the blank spaces/empty image areas created by the mouse over. Everything is displaced by three columns, leaving one row empty, with the exception of Column 4. It also fills out the bottom row (Row 5), with three products and leaves the Row 5, Column 4 position empty.

We have tried reducing the frame padding – and even giving it a negative value – but nothing alters the 3-frame image displacement…

congocollection.com