使用 css 缩放图像答案

【问题标题】：Zoom image using css使用 css 缩放图像
【发布时间】：2013-01-05 09:45:55
【问题描述】：

我正在尝试在鼠标悬停时缩放图像。我得到了缩放效果，但图像应该在那个“列表”标签内放大，而不是在那个“列表”之外。我应该怎么做才能获得像弹出一样的缩放效果？

我已将 CSS 应用于列表以使其水平，例如：

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

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

【问题讨论】：

您能提供更多信息吗？不清楚你想达到什么目标
更改.thumbnail_img:hover span 上的top 和left 值
@Tom sarduy：鼠标悬停时缩放图像（实际尺寸宽度=55，高度=60"）

标签： html css hover zooming

【解决方案1】：

图像缩放在该列表中，因为您相对于 .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>

【讨论】：

@benbail1: 没有缩小
。

你的'out of'是什么意思？应该消失的位置或拇指？顺便问一下，你的目标浏览器是什么？

：图像缩放使用上面的css代码，但它的块在列表的高度内。

我明白了，那就试试更新后的样例，.thumbnail_img:hover span的上、左、比例都更新了