Css hover not effect with bottom and right margin

Question

I have this css code

#menu:hover img
{
    margin-bottom:50px;
}

and html

<figure id="menu">

    <img src="demo HTML/CaptionHoverEffects/demo 1/images/1.png"/>
    <figcaption class="content">
        <h3>Settings</h3>
        <span>Jacob Cummings</span>
        <a href="http://dribbble.com/shots/1116685-Settings">Take a look</a>
    </figcaption>


</figure>

At css code, when I change margin-bottom to margin-left or margin-right, it safe run, but with margin-bottom, it's not effect. How can I solve it?

Answer 1

#menu:hover img {
  margin-bottom: 50px;
}

<figure id="menu">

  <img src="http://placehold.it/350x150" />
  <figcaption class="content">
    <h3>Settings</h3>
    <span>Jacob Cummings</span>
    <a href="http://dribbble.com/shots/1116685-Settings">Take a look</a>
  </figcaption>


</figure>