Как реализовать такой эффект?

Question

[Павел Сергеев]

Всем здравствуйте!
Не могу понять, как реализовать такой эффект.
Имеется вот такой html код:

<div class="item-block">
  <div id="hover"></div>
  <img src="img/i.png" alt="">
  <span class="status">в наличии</span>
  <a href="" class="item-name tnormal">Нименование товара</a>
</div>

Нужно сделать так, чтобы при наведении на img, появлялся блок "hover".
Также имеется вот такой JS код:

<script>
        $('.item-block').hover(
            function () {
                $('#hover', this).slideDown('fast');
            },
            function () {
                $('#hover', this).slideUp('fast');
            }
        )
    </script>

Все работате, но есть одно НО, надо чтобы блок "hover" был поверх изображения, а не сталкивал его вниз.
Объясните пожалуйста. Заранее спасибо.

Answer 1

[Максим Тимофеев]

У картинки и блока, который появляется должен быть общий родитель с position:relative;
А появляющийся блок должен иметь position:absolute; top:0; left:0;

Comments

[Павел Сергеев]

Спасибо за совет.