title: Changing images on hover
body: <p>I am trying to change images on hover,i put the default image at size 108x100 and the image that was suppose to change into on hover is at size 161x143 but when i hover image does change but  instead of enlarge it gets even smaller.</p>
  
  <p>Here is my html(bootstrap) code...</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="well" style="margin-bottom:0px;background-color:black;"&gt;
  
          &lt;div id="myCarousel" class="carousel slide" &gt;
              &lt;div class="carousel-inner"&gt;
                  &lt;div class="item active"&gt;
                      &lt;div  class="row" style="margin-left:8.3333%"&gt;
                          &lt;div  class="col-xs-1  col-sm-1  col-md-1  col-lg-1"&gt;
                              &lt;img id="graficki-dizajn" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" &gt;
                          &lt;/div&gt;
                          &lt;div class="col-xs-1  col-sm-1  col-md-1  col-lg-1"&gt;
                              &lt;img id="stampa-svih-formata" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" &gt;
                          &lt;/div&gt;
                          &lt;div class="col-xs-1  col-sm-1  col-md-1  col-lg-1"&gt;
                              &lt;img id="web-dizajn" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" &gt;
                          &lt;/div&gt;
                          &lt;div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"&gt;
                              &lt;img id="kreativno-pisanje" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" &gt;
                          &lt;/div&gt;
                          &lt;div class="col-xs-1  col-sm-1 col-md-1 col-lg-1 "&gt;
                              &lt;img id="pr" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" &gt;
                          &lt;/div&gt;
                          &lt;div class="col-xs-1  col-sm-1 col-md-1 col-lg-1 "&gt;
                              &lt;img id="izrada-tv-i-radio-reklama" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" &gt;
                          &lt;/div&gt;
                          &lt;div class="col-xs-1  col-sm-1 col-md-1 col-lg-1 "&gt;
                              &lt;img id="media-buying" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" &gt;
                          &lt;/div&gt;
                          &lt;div class="col-xs-1  col-sm-1 col-md-1 col-lg-1 "&gt;
                              &lt;img id="3d-projektovanje" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" &gt;
                          &lt;/div&gt;
                          &lt;div class="col-xs-1  col-sm-1 col-md-1 col-lg-1 "&gt;
                              &lt;img id="promocije-i-manifestacije" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" &gt;
                          &lt;/div&gt;
                          &lt;div class="col-xs-1  col-sm-1 col-md-1 col-lg-1 "&gt;
                              &lt;img id="prevod-tekstova" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" &gt;
                          &lt;/div&gt;
                          &lt;div class="col-xs-1  col-sm-1 col-md-1 col-lg-1 "&gt;
                              &lt;img id="prikupljanje-i-izrada-dokumenata-za-potrebe-firme" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" &gt;
                          &lt;/div&gt;
  
  
  
  
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
  
  
              &lt;/div&gt;
  
  
          &lt;/div&gt;&lt;!-- End Carousel --&gt;
      &lt;/div&gt;&lt;!-- End Well --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>My jquery for hover change...</p>
  
  <pre><code>$(document).ready(function(){
  $("#graficki-dizajn").hover(function() {
  
      $("#graficki-dizajn").attr("src","http://placehold.it/161x143");
  
          }, function() {
  
      $("#graficki-dizajn").attr("src","http://placehold.it/108x100");
  
  
  
  });
  
  $("#stampa-svih-formata").hover(function() {
  
      $("#stampa-svih-formata").attr("src","http://placehold.it/161x143");
  
          }, function() {
  
      $("#stampa-svih-formata").attr("src","http://placehold.it/108x100");
  
  
  
  });
  
  $("#web-dizajn").hover(function() {
  
      $("#web-dizajn").attr("src","http://placehold.it/161x143");
  
          }, function() {
  
      $("#web-dizajn").attr("src","http://placehold.it/108x100");
  
  
  
  });
  
  $("#kreativno-pisanje").hover(function() {
  
      $("#kreativno-pisanje").attr("src","http://placehold.it/161x143");
  
          }, function() {
  
      $("#kreativno-pisanje").attr("src","http://placehold.it/108x100");
  
  
  
  });
  
  $("#pr").hover(function() {
  
      $("#pr").attr("src","http://placehold.it/161x143");
  
          }, function() {
  
      $("#pr").attr("src","http://placehold.it/108x100");
  
  
  
  });
  
  
  $("#izrada-tv-i-radio-reklama").hover(function() {
  
      $("#izrada-tv-i-radio-reklama").attr("src","http://placehold.it/161x143");
  
          }, function() {
  
      $("#izrada-tv-i-radio-reklama").attr("src","http://placehold.it/108x100");
  
  
  
  });
  
  $("#media-buying").hover(function() {
  
      $("#media-buying").attr("src","http://placehold.it/161x143");
          }, function() {
  
      $("#media-buying").attr("src","http://placehold.it/108x100");
  });
  
  $("#3d-projektovanje").hover(function() {
  
      $("#3d-projektovanje").attr("src","http://placehold.it/161x143");
          }, function() {
  
      $("#3d-projektovanje").attr("src","http://placehold.it/108x100");
  });
  
  $("#promocije-i-manifestacije").hover(function() {
  
      $("#promocije-i-manifestacije").attr("src","http://placehold.it/161x143");
          }, function() {
  
      $("#promocije-i-manifestacije").attr("src","http://placehold.it/108x100");
  });
  
  
  
  $("#prevod-tekstova").hover(function() {
  
      $("#prevod-tekstova").attr("src","http://placehold.it/161x143");
          }, function() {
  
      $("#prevod-tekstova").attr("src","http://placehold.it/108x100");
  });
  
  $("#prikupljanje-i-izrada-dokumenata-za-potrebe-firme").hover(function() {
  
      $("#prikupljanje-i-izrada-dokumenata-za-potrebe-firme").attr("src","http://placehold.it/161x143");
          }, function() {
  
      $("#prikupljanje-i-izrada-dokumenata-za-potrebe-firme").attr("src","http://placehold.it/108x100");
  });
  
  
   });
  </code></pre>
  
  <p>And jsfiddle...<a href="http://jsfiddle.net/s2b47/" rel="nofollow">http://jsfiddle.net/s2b47/</a></p>
  
  <p>I am not enlarging the same image,the two images are different by appearance and by resolution...How can i achieve enlarge effect that i want?Any help is appreciated.</p>