2011 and Hoverbox Image Gallery

ok so everything works except the hover effect. on mouse over the image expands from 100×75 to 200×150. the height expansion works, but the with is blocked for some reason!
it works as a unordored list <ul>, and I’m sure it has something to do with that.

I’ve tried two methods.
first css and html:
[Code moderated as per the Forum Rules. Please use the pastebin]

And also this one which does the same thing:

[Code moderated as per the Forum Rules.]

You can see a working version here https://host.sonspring.com/hoverbox/ and here https://qrayg.com/experiment/hig/

I’ve been through everything i can think of and have tried different setups and altering the css with no luck. the same thing keeps happening, the hover/ expanded previewed image will expand in height but not width. I believe it’s a conflict with the theme 2011.