title: Margin change causes multiple divs to be affected
body: <p>I want my logo image to move up without effecting the wording below it, but both elements are triggered even though they're in different divs, wrapped in a parent div.  I don't get it.  I'm assuming it has something to do with the margins, but when I tried to reverse set the opposite values for the text elements things acted strangely.</p>
  
  <p><a href="http://jsfiddle.net/ntzhh/1/" rel="nofollow">A Fiddle</a></p>
  
  <p>CSS:</p>
  
  <pre><code>.full-circle {
  display:block;
  margin:auto;
  margin-top: 15px;
  overflow: hidden;
  height: 180px;
  width: 180px;
  border: 2px solid #FFF;
  -moz-border-radius: 90px;
  -webkit-border-radius: 90px;
  background:#FDF5E6;
  -webkit-transition: margin 0.2s ease-out; 
  -moz-transition: margin 0.2s ease-out; 
  -o-transition: margin 0.2s ease-out;
  }
  
  .full-circle:hover{margin-top: 2px;}
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('.full-circle').hover(
              function(){
                  $(this).stop().animate(
                      {marginTop: '2'}, 20, 'linear'   
                  );//end animate
              },//end function
              function(){
                  $(this).stop().animate(
                  {marginTop: '15'}, 20, 'linear'
                  );//end animate
              }//end function
          );//end hover
  </code></pre>