How to implement such an effect?

Question

JavaScript

Hello everybody!
I can't figure out how to implement this effect.
There is this html code:

<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>

You need to make it so that when you hover over img, the "hover" block appears.
There is also this JS code:

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

Everything works, but there is one BUT, it is necessary that the "hover" block be on top of the image, and not push it down.
Explain, please. Thanks in advance.

Answer 1

The image and the block that appears must have a common parent with position:relative;
And the appearing block should have position:absolute; top:0; left:0;