Zoom image using css

Question

I am trying to zoom image on mouseover. I am getting the zoom effect, but the image should zoom within that "list" tag, not out of that "list". What should I do to get zoom effect like a pop up?

I have applied CSS to the list to make it horizontal, like:

image1 image2 image3 ..... in ul and li tag.

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

<div class="mytest" id="slideshow-carousel" style="padding-top:12px;padding-left: 33px;">
    <ul id="carousel" class="jcarousel jcarousel-skin-tango">
        <li>
            <a href="#" rel="p1"  class="thumbnail_img"> <img src="image.jpg " width="55" height="60" alt="#"/>
                <span><img src="image.jpg" style="height:100px; width:100px" /></span>
            </a>
        </li>
        <li>
            <a href="#" rel="p1"  class="thumbnail_img"> <img src=" " width="55" height="60" alt="#"/>
                <span><img src="" style="height:100px; width:100px" /></span>
            </a>
        </li>
    </ul>
</div>

Answer 1

Try this:

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

If you don't wanna overflow li then add

.thumbnail_img li
{
    overflow: hidden;
}