title: How to zoom div on hover in percent
body: <p>i want that the zoom-in will effect only the img inside the div and won't resize all the div scale</p>
  
  <p>here is the fiddle link:
  <a href="http://jsfiddle.net/4tHWg/1/">http://jsfiddle.net/4tHWg/1/</a></p>
  
  <p>example code:</p>
  
  <pre><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%;
  }
  </code></pre>