How to zoom div on hover in percent

Question

i want that the zoom-in will effect only the img inside the div and won't resize all the div scale

here is the fiddle link: http://jsfiddle.net/4tHWg/1/

example code:

.box {
   float: left;
   position: relative;
   width: 14.285714286%;



}

.boxInner img {
   width: 100%;
   display: block;
   -webkit-filter: grayscale(00%);
   -moz-filter: grayscale(00%);
   -o-filter: grayscale(00%);
   -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
      transition: all 1s ease;

}

.boxInner img:hover {
  width: 200%;
}

Answer 1

You can use css transforms:

http://jsfiddle.net/4tHWg/3/

.boxInner img:hover {      
  -webkit-transform: scale(1.4);
  -moz-transform: scale(1.4);
  -ms-transform: scale(1.4);
  -o-transform: scale(1.4);
  transform: scale(1.4);    
}

1.4 equals 1.4 times its original size.

Answer 2

Adding on to hugo's answer, you should add this to your parent element.

.boxInner {
    overflow: hidden;
}

.boxInner img:hover {      
   -webkit-transform: scale(1.4);
   -moz-transform: scale(1.4);
   -ms-transform: scale(1.4);
   -o-transform: scale(1.4);
   transform: scale(1.4);    
}

This way the div won't resize together with the child image.