CSS size transition to stay inside parent div

Question

I want to have an image frame that when I hove over it the image inside will zoom in a little (I am using size transition), but the frame will stay the same size.

What happens now that even if the frame has a fixed width and height it is stilled zoomed with the image

HTML:

<div class="img-wrapper">
  <img class="thumbnail" src="http://placekitten.com/400/200">
</div>

and CSS

.img-wrapper {
  width: 400px;
}
.thumbnail {
  width: 400px;
}

.thumbnail {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.thumbnail:hover {
  width: 500px;

  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

http://codepen.io/pen/KCJny

Answer 1

One way to fix this would be to set overflow:hidden;

So, this might work:

.img-wrapper {
  width: 400px;
  height:200px;
  overflow:hidden;
}

Answer 2

If you want the image to stay centered (as an addition to Brian's answer) you can do this:

.thumbnail {
  width: 400px;
  position:relative;
  left:50%;
  margin-left:-200px;
}

.thumbnail:hover {
  width: 500px;
  margin-left:-250px;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}