I'm trying to show some information on a picture when onmouseover/onmouseout event occurs. What I want to achieve is something like this website does on top selling.

My code is like this:

<div class="container" onmouseover="$('#info').css('display','block');" onmouseout="$('#info').css('display','none');">
<img src=...">
    <div id="info" style="display:none">
       ... some text ...
</div>
</div>

So div info block is initially hidden, but when mouse is on a picture I want the information to appear on corresponding picture (with tint background on the image to see text well). But somewhat it doesn't work. I appreciate any suggestion how to approach this problem.

Edit: more precisely, the reason why I choose to use inline because I need to show/hide text corresponding to the image(contain unique div id)that user put their mouse on/out. That means I have many div container and each container has unique div id.