使用css缩放图像

Question

使用css缩放图像

我试图在鼠标悬停时缩放图像.

我正在获得缩放效果,但图像应该在"list"标签内放大,而不是在"list"之外.
我该怎么做才能获得像弹出窗口一样的缩放效果.

编辑:我已经将css应用于列表以使其像水平一样:

image1 image2 image3 ..... 在ul和li标签中.

我试过以下代码.

<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>

Run Code Online (Sandbox Code Playgroud)

CSS:

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Fac*_*bed 5

试试这个:

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

Run Code Online (Sandbox Code Playgroud)

如果你不想溢出李然后添加

.thumbnail_img li
{
    overflow: hidden;
}

Run Code Online (Sandbox Code Playgroud)

Answer 2

ben*_*123 3

图像缩放在该列表内，因为您相对于 .thumbnail_img （在列表内）进行分配，这使其成为绝对定位图像的锚点，我稍微调整了您的样式，如下所示，以使图像缩放在列表之外：

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，3 月前
查看次数：	57458 次
最近记录：	10 年，2 月前