title: Zoom image using css
body: <p>I am trying to zoom image on mouseover. I am getting the zoom effect, but the image should zoom within that &quot;list&quot; tag, not out of that &quot;list&quot;. What should I do to get zoom effect like a pop up?</p>
  <p>I have applied CSS to the list to make it horizontal, like:</p>
  <p><code>image1  image2 image3 .....</code> in ul and li tag.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.thumbnail_img {
      position: relative;
      z-index: 0;
      /*right:420px;*/
  }
  
  .thumbnail_img:hover {
      background-color: transparent;
      z-index: 100;
  }
  
  .thumbnail_img span img { 
      display: inline-block;
      margin:-13px 17px 2px -13px;
  }
  
  .thumbnail_img span { 
      position: absolute;
      visibility: hidden;
      color: black;
      text-decoration: none;
      -webkit-transform:scale(0.8);
      -moz-transform:scale(0.8);
      -o-transform:scale(0.8);
      -webkit-transition-duration: 0.5s;
      -moz-transition-duration: 0.5s;
      -o-transition-duration: 0.5s;
      opacity: 0.7;
  }
  
  .thumbnail_img:hover span { /*CSS for enlarged image on hover*/
      visibility: visible;
      background: transparent;
      top: 0px;
      left:5px;
      -webkit-transform:scale(1.2);
      -moz-transform:scale(1.2);
      -o-transform:scale(1.2);
      opacity: 3;
      height:auto; width:auto;
      border:0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="mytest" id="slideshow-carousel" style="padding-top:12px;padding-left: 33px;"&gt;
      &lt;ul id="carousel" class="jcarousel jcarousel-skin-tango"&gt;
          &lt;li&gt;
              &lt;a href="#" rel="p1"  class="thumbnail_img"&gt; &lt;img src="image.jpg " width="55" height="60" alt="#"/&gt;
                  &lt;span&gt;&lt;img src="image.jpg" style="height:100px; width:100px" /&gt;&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#" rel="p1"  class="thumbnail_img"&gt; &lt;img src=" " width="55" height="60" alt="#"/&gt;
                  &lt;span&gt;&lt;img src="" style="height:100px; width:100px" /&gt;&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>