Q:

Zoom an image when hover

I'm trying to build a website, so I have an image when I hover it I want it to zoom but the problem is the image zoom with a bad way it come out of a div how I can fix that?
<div class="container">
  <img src="image.jpg" alt="" height="400" width="500"/>
</div>

My css style
.container{
  height: 400px;
  width: 500px;
  border: 2px solid red;
}
.container:hover img{
  height: 500px;
  width: 600px;
}

FIDDLE

A:

try to add overflow: hidden to the div so the content will be clipped, and the rest of the content will be invisible
.container{
  height: 400px;
  width: 500px;
  border: 2px solid red;
  overflow: hidden
}
.container:hover img{
  height: 500px;
  width: 600px;
}

