title: Bump Up hover effect on Div with css and html only
body: <p>I am trying to have a hover effect on a div so that the div containing the image moves up on hover. I want the "polaroid" div to move up on hover. This effect works if i just apply the hover class to the img but not the whole div. Please help. Fiddle <a href="http://jsfiddle.net/txgvh/" rel="nofollow">here</a></p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div id="home-gal-col"&gt; &lt;span class="span-homegal"&gt;
      &lt;a href="/listings/category/accessories/"&gt;
          &lt;div class="polaroid"&gt;
              &lt;img src="/images/homegal/picture.jpg"&gt;
              &lt;p&gt;picture&lt;/p&gt;
              &lt;/img&gt;
          &lt;/div&gt;
      &lt;/a&gt;
     &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>#home-gal-col {
  width:15%;
  float:left;
  padding:5px;
  }
  
  .polaroid {
  border: 10px solid #fff;
  border-bottom: 15px solid #fff;
  -webkit-box-shadow: 3px 3px 3px #777;
  -moz-box-shadow: 3px 3px 3px #777;
  box-shadow: 3px 3px 3px #777;
  }
  
  .polaroid img {
  margin: 0 auto;
  width: 100%;
  }
  
  .polaroid p {
  text-align: center;
  color: #D51386;
  }
  
  .span-homegal a {
  -webkit-transition: margin 0.2s ease-out;
  -moz-transition: margin 0.2s ease-out;
  -o-transition: margin 0.2s ease-out;
  }
  
  .span-homegal a:hover {
  margin-bottom: 5px;
  }
  </code></pre>