Zoom image using css

html css hover zooming

67,768

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

Solution 2

The image zoom's within that list since you assign relative to .thumbnail_img (which within the list) and this makes it becomes the anchor of absolute positioned image, I've slightly adjust your style as below to make the image zoom's outside the list:

<html>
    <head>
        <style>
            body {
                /* move position: relative from .thumbnail_img to body*/
                position: relative;
            }
            .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: 250px;
                left:500px;
                -webkit-transform:scale(5);
                -moz-transform:scale(5);
                -o-transform:scale(5);
                opacity: 3;
                height:auto; width:auto;
                border:0;
            }
        </style>
    </head>
    <body>
        <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>
    </body>
</html>

Solution 3

Zoom image on mouse hover !!

.pic{
	width:200px;
	height:120px;
}
.zoom{
	position: absolute;
	width:0px;
	-webkit-transition:width 0.3s linear 0s;
	transition:width 0.3s linear 0s;
	z-index:10;
}
.pic:hover + .zoom{
	width:400px;

}

<img class="pic" src="http://lamina17.info/image/cpp.png" alt="image">
<img class="zoom" src="http://lamina17.info/image/cpp.png" alt="image">

See Demo here Zoom Image Using Css

67,768

Author by

Kango

Updated on September 03, 2020

Comments

Kango over 3 years

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>

Kango over 11 years

:Getting zoom but within <li> </li>.
Kango over 11 years

@benbail1:Not getting zoom outof <li>.
Facbed over 11 years

You can try and increase your z-index but sometimes z-index doesn't help much if you want your container has a less z-index than from the one you want to zoom out. It would be good you can show me exactly how you wish to zoom out with the source files
benbai123 over 11 years

what is your 'out of' mean? The position or the thumb one should disappeared? By the way, what is your target browsers?
Kango over 11 years

:image zoom using above css code but its block within Height of list.
benbai123 over 11 years

I see, then try the updated sample, the top, left and scale of .thumbnail_img:hover span are updated
Saikat Saha about 4 years

Could you be more descriptive?
codedge about 4 years

Thank you for this code snippet, which might provide some limited, immediate help. A proper explanation would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please edit your answer to add some explanation, including the assumptions you’ve made.