Html 使用 css 缩放图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14453872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Zoom image using css
提问by Kango
I am trying to zoom image on mouseover.
我正在尝试在鼠标悬停时缩放图像。
I am getting the zoom effect but image should zoom within that "list" tag not out of that "list".
What should I do to get zoom effect like pop up.
我得到了缩放效果，但图像应该在“列表”标签内而不是在“列表”之外进行缩放。
我该怎么做才能获得像弹出一样的缩放效果。
Edit: I have applied css to list to make it horizontal like:
编辑：我已将 css 应用于列表以使其水平，例如：
image1 image2 image3 .....in ul and li tag.
image1 image2 image3 .....在 ul 和 li 标签中。
I have tried following code.
我试过以下代码。
<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>
Css:
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;
}
回答by Facbed
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
如果你不想溢出 li 然后添加
.thumbnail_img li
{
overflow: hidden;
}
回答by benbai123
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:
图像缩放在该列表中，因为您相对于 .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>
回答by Dr.Darshan
- 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">在此处查看演示 Zoom Image Using Css使用 Css 缩放图像
回答by Name Shayan
??? ???? ?????? ?????? * In the name of God
？？？？？？？？？？？？？？？？？？* 以上帝的名义
<style>img:hover{transform:scale(1.2)}</style>
<img src="https://i.pinimg.com/236x/73/7d/ac/737dac12b48b03cd97fb6152dfa023b4.jpg">
