Dovresti togliere il position:relative al tag <a>, ed inseriscilo invece nel tag <div id="gallery">.

Il problema specificato si risolve, ma sorgono altri problemi di usabilita`, per cui non credo che la soluzione ti piacera`.

Credo che ti convenga lasciare il comportamento originale, (eventualmente puoi ridurre il valore di top del :hover img), ed invece metti un'immagine molto chiara (tipo sfondo quasi trasparente) alla fine della galleria in modo da riservare un po' di posto per l'espansione.

E potresti invece definire il left:0 per le immagini che restano a sinistra (come adesso) e fissare al suo posto un right:0 per le immagini che si posizionano a destra nella galleria.