title: Mouse hover change image position and size
body: <p>I'm trying to do a button menu for my web site and I have an issue with the position of the image on mouse hover. This is what I have created so far <a href="http://jsfiddle.net/tNLUx/" rel="nofollow noreferrer">http://jsfiddle.net/tNLUx/</a></p>
  
  <p>On mouseover, I want the selected image to grow and the other ones keep their same position just like the first image... how do I make the down images to grow and move down instead of moving up?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#btnSocial {
    width:100px;
    position: relative;
    opacity: 0.5;
    -webkit-opacity: 0.5;
    -moz-opacity: 0.5;
    transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
  }
  #btnSocial:hover{
    width: 150px;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocial" class="social1" /&gt;
  &lt;img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocial" class="social2"/&gt;
  &lt;img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocial" class="social3"/&gt;
  &lt;img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocial" class="social4"/&gt;</code></pre>
  </div>
  </div>
  </p>