logo标签列表

使用 CSS 缩放图像

htmlcsshoverzooming
9

我试图在鼠标悬停时对图像进行缩放。我得到了缩放效果，但是图像应该在“列表”标记内缩放，而不是超出“列表”。我该怎么做才能获得弹出窗口的缩放效果？

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

在ul和li标记中的image1 image2 image3 ......

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

你能提供更多信息吗？不清楚你想要实现什么。 - Tomas Ramirez Sarduy
更改 .thumbnail_img:hover span 上的 top 和 left 值。 - Tomas Ramirez Sarduy
@Tom Sarduy：鼠标悬停时缩放图像（实际大小宽度=55，高度=60）。 - Kango
4个回答
14

试试这个：

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

如果您不想使li溢出，请添加：

.thumbnail_img li
{
    overflow: hidden;
}
在 <li> </li> 中获得缩放。 - Kango
你可以尝试增加z-index，但有时如果你想让容器的z-index小于你想缩小的那个元素，z-index并不能帮助太多。如果你能展示给我你想如何缩小的源文件，那就最好了。 - Facbed
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>
@benbail1：无法将缩放应用于<li>。 - Kango
你的“out of”是什么意思？是指位置还是应该消失的拇指？顺便问一下，你的目标浏览器是什么？ - benbai123
使用上面的 CSS 代码进行图像缩放，但它会在列表高度内被阻挡。 - Kango
我明白了，那就试试更新后的示例吧，.thumbnail_img:hover span 的顶部、左侧和比例都已经更新了。 - benbai123
1
鼠标悬停时缩放图像!! 



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


在此查看演示 使用CSS缩放图像

0
<style>img:hover{transform:scale(1.2)}</style>
<img src="https://i.pinimg.com/236x/73/7d/ac/737dac12b48b03cd97fb6152dfa023b4.jpg">

transform image

2
你能更详细地描述一下吗？ - Saikat Saha
1
感谢您提供这段代码片段，它可能会提供一些有限的、即时的帮助。一个适当的解释将极大地提高其长期价值，因为它可以展示为什么这是一个好的问题解决方案，并使其对未来读者在其他类似问题上更有用。请[编辑]您的答案以添加一些解释，包括您所做的假设。 - codedge
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接