Zoom In On Image On Hover Using Transform: Scale, Still Making Image Bigger From Outside

How do I make it so the image zooms in on itself with out making the outside larger e.g this is what I want, I have tried to implement this but it doesn't work the same: http://jsf

Solution 1:

Change your HTML structure to this:

Updated Example

<div class="col-md-6">
    <div class="img-wrapper">
        <img src="https://unsplash.it/800" alt="" class="img-responsive">
    </div>
</div>

The reason the element appeared to be expanding was because there is padding on the parent .col-md-6 element (padding-left/padding-right of 15px).

By changing the immediate parent element to .img-wrapper, you effectively displace this and hide the overflow.