title: How to scale image out of div?
body: <p>I am trying to scale image on hover using css,</p>
  
  <p>here is my code</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="cli-wrap"&gt;
  &lt;ul class="clearfix" id="ci-list" style="width: 2640px;"&gt;
      &lt;li style="margin-left: 0px;" class="zoomage"&gt;&lt;a target="_blank" href="#"&gt;&lt;img border="0" src="images/1.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li style="margin-left: 0px;" class="zoomage"&gt;&lt;a target="_blank" href="#"&gt;&lt;img border="0" src="images/2.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li style="margin-left: 0px;" class="zoomage"&gt;&lt;a target="_blank" href="#"&gt;&lt;img border="0" src="images/3.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li style="margin-left: 0px;" class="zoomage"&gt;&lt;a target="_blank" href="#"&gt;&lt;img border="0" src="images/4.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li style="margin-left: 0px;" class="zoomage"&gt;&lt;a target="_blank" href="#"&gt;&lt;img border="0" src="images/5.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li style="margin-left: 0px;" class="zoomage"&gt;&lt;a target="_blank" href="#"&gt;&lt;img border="0" src="images/6.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li style="margin-left: 0px;" class="zoomage"&gt;&lt;a target="_blank" href="#"&gt;&lt;img border="0" src="images/7.png"&gt;&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.zoomage:hover img {
      -webkit-transform:scale(7.10); /* Safari and Chrome */
      -moz-transform:scale(7.10); /* Firefox */
      -ms-transform:scale(7.10); /* IE 9 */
      -o-transform:scale(7.10); /* Opera */
       transform:scale(7.10);
      z-index:1;
  }
  
  .cli-wrap {
      display: block;
      margin: 0 auto;
      overflow: hidden;
      padding: 40px;
      width: 620px;
      z-index: -1;
  }
  </code></pre>
  
  <p>here the image is scaling on hover but, the image is scaling within  the div .cli-wrap.
  the image is scaling to big size but it is only scaling inside the div. but i need to scale  the image outside the div. i tried using the z-index for div .cli-wrap</p>
  
  <p>how can i do this?</p>