CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrappopover
Ruut
Ruut

Reputation: 1161

Enlarge image on hover using Twitter Bootstrap

I am new to bootstrap and would like to enlarge all images with class img-rounded on hoverring

I implemented it like this:

<div class="container">
  <div class="row">
    <div class="span4">
      <div class="well">
        <img src="MyImage.png" class="img-rounded">
      </div>
    </div>
  </div>
</div>

<script>
  $( document ).ready(function() {
    $('.img-rounded').popover({
      html: true,
      trigger: 'hover',
      placement: 'bottom',
      content: function () {
        return 
          '<img class="img-rounded" style="float:right;width:500px;max-width:500px;" src="
          +$(this)[0].src + '" />';
      }
    });
  });

</script>

Unfortunately the bounding box around the enlarged image is not enlarged. How to fix this?

Upvotes: 1

Views: 15665

Answers (2)

davidkonrad
davidkonrad

Reputation: 85528

This is caused by the popovers default max-width: 276px. Simply add

<style type="text/css">
.popover {
    max-width: 1000px;
}
</style>

(or any other value, auto does not work here) and the popover will fit the image.

Upvotes: 2

Colt Stumpf
Colt Stumpf

Reputation: 121

You could do this easily just using css.

#img1{
height:200px;
}
#img1:hover{
height:400px;
}

Also you can apply a number of additional effects as needed with far less code. You can also manage the parent div accordingly to match this css rule. Not ALL things require JS.

Upvotes: 1

Related Questions