title: Enlarge image on hover using Twitter Bootstrap
body: <p>I am new to bootstrap and would like to enlarge all images with class <strong>img-rounded</strong> on hoverring</p>
  
  <p>I implemented it like this:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="span4"&gt;
        &lt;div class="well"&gt;
          &lt;img src="MyImage.png" class="img-rounded"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
    $( document ).ready(function() {
      $('.img-rounded').popover({
        html: true,
        trigger: 'hover',
        placement: 'bottom',
        content: function () {
          return 
            '&lt;img class="img-rounded" style="float:right;width:500px;max-width:500px;" src="
            +$(this)[0].src + '" /&gt;';
        }
      });
    });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Unfortunately the bounding box around the enlarged image is not enlarged. How to fix this? </p>