title: Origin of image in jquery animation (height and width)
body: <p>working on another site, and find a problem I cant figure out</p>
  
  <p>I have a picture inside a div. on click I use animate(width, height).
  Problem is that effect working from top left corner, but I need it to work from bottom middle.</p>
  
  <p>Search the web, but without a luck.</p>
  
  <p>It's must be a simple task, but I cannot figure it out.</p>
  
  <p><a href="http://jsfiddle.net/alexela/7gk8D/" rel="nofollow">jsfiddle</a></p>
  
  <p>Thanks in advance
  Alexei</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;style&gt;
  
  #prof_window{
      height: 250px;
      margin: 0 auto 60px;
      outline: 1px solid #808080;
      overflow: hidden;
      position: relative;
      top: 85px;
      width: 1072px;
      background-color: rgba(100, 200, 11, 0.7);
  }
  
  #prof_div{
      height: 300px;
      outline: 1px solid #808080;
      position: absolute;
      top: 0;
      width: 1200px;
  }
  
  .profi{
      position: relative;
      margin-right: 60px;
      display: block;
      float: left;
      background: url(images/home_layer1.png);
      border: 8px solid;
      border-color: rgba(255, 255, 255, 0.7);
      border-radius: 10px;
      overflow: hidden;
      width: 130px;
      height: 130px;
      bottom: -100px;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="prof_window"&gt;
      &lt;div id="prof_div"&gt;
          &lt;div class="profi"&gt;&lt;img src="http://www.luxmed.co.il/wp-content/uploads/2014/03/Дан-Флис.jpg" alt=""&gt;&lt;/div&gt;
          &lt;div class="profi"&gt;&lt;img src="http://www.luxmed.co.il/wp-content/uploads/2014/03/Дан-Флис.jpg" alt=""&gt;&lt;/div&gt;
          &lt;div class="profi"&gt;&lt;img src="http://www.luxmed.co.il/wp-content/uploads/2014/03/Дан-Флис.jpg" alt=""&gt;&lt;/div&gt;
          &lt;div class="profi"&gt;&lt;img src="http://www.luxmed.co.il/wp-content/uploads/2014/03/Дан-Флис.jpg" alt=""&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  $(document).ready(function(){
      $('.profi').click(function() {
          $(this).animate({width: '100px', height: '100px'});
      });
  })
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>