Div движется при наведении со шкалой

Question

Смотрите здесь:

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

Заголовок, который позиционируется с помощью позиции: абсолютная по миниатюре (позиция: относительная), перемещается при наведении курсора на миниатюру. Единственное, что определено для: hover - это

transform:scale(1.2);

Есть идеи как исправить?

Мне нужны два отдельных div для заголовка, 1 для bg, 1 для текста (нельзя использовать RGBA).

Обратите внимание, что поле вокруг изображения должно оставаться. В этом примере 5px, но может быть и 20px или более.

Спасибо, Уэсли

Answer 1

это рабочий 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>