Zoom an image when hover

Question

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

Answer 1

something like this JS Fiddle ?

 .container { height: 400px; width: 500px; border: 2px solid red; overflow: hidden } .container img { /* add this rule */ width:100%;; height:100%; transition:all 0.7s ease-in-out; } .container:hover img { /* change this rule */ width:120%; height:120%; margin:-10% 0 0 -10%; transition:all 0.7s ease-in-out; } 

 <div class="container"> <img src="http://motivationhacks.org/wp-content/uploads/2015/07/steve-jobs-black-white.jpg" alt="" height="400" width="500" /> </div> 

Answer 2

One of the most efficient method will be to use scale transition CSS property as follows,

.container{
  height: 400px;
  width: 500px;
  border: 2px solid red;
  overflow: hidden;
}

.container:hover img{
  transform: scale(1.25);
}

By using the scale property, the image would zoom smoothly on all devices including mobile devices. So you don't need to specify accurate height and width values for each and every device.

Hope this helps :)

Answer 3

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;
}