Div moves on hover with scale

See here:

http://jsfiddle.net/MLaVb/1/

The caption that is positioned via position:absolute over the thumbnail (position:relative) moves when you hover over the t开发者_运维技巧humbnail.. The only thing defined on :hover is the

transform:scale(1.2);

Any ideas how to fix?

I need two separate divs for the caption, 1 for the bg, 1 for the text (can't use RGBA).

Note that the margin around the image needs to remain. In this example, 5px, but could just as well be 20px or more.

Thanks, Wesley

this is the working html +css

<a href="https://picasaweb.google.com/Darryl.Wilson1/MyPictures02#5157833312913845474"       style="padding:0px;margin:0px" class="thumbnail zoom">

<div class="container" style="padding:0px;margin:0px">
     <img src="http://lh6.ggpht.com/-iMWjZc44UuA/R5ROEhrn7OI/AAAAAAAAAV4/3l2mDuaeQ4Q/s160-c/Acura%252520Advanced%252520Sports%252520Car%252520Concept%25252002.jpg" style="width: 160px;">

    <div class="title_grid inside" style="width: 160px;margin:0px;position:absolute;left:0px ">
    </div>
    <div class="title_grid inside_text" style="width: 160px;">
     <span>&nbsp;Acura Advanced</span>
    </div>
</div>
</a>