悬停时的图像缩放
[英]Image scaling on hover
问题描述
我在HTML页面中有很少的图像，并希望这些图像在悬停时缩放。 所以我写了下面的代码，效果很好。 但是，现在图像在其位置缩放，因此有可能会被剪切，所以我希望缩放的图像放在屏幕的中心。 有人可以帮我弄这个吗？
编码：
.parentimage { width: 100px; height: 100px; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .parentimage:hover { -moz-transform: scale(4); -webkit-transform: scale(4); -o-transform: scale(4); -ms-transform: scale(4); transform: scale(4); }
<li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li> <li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li> <li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li> <li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li> <li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li> <li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li> <li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li>
3 个解决方案
解决方案1
0 2016-05-31 07:18:59
尝试这个..
<!DOCTYPE html>
<html>
<head>
<style>
.parentimage {
width: 100px;
height: 100px;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.parentimage:hover {
-moz-transform: scale(4);
-webkit-transform: scale(4);
-o-transform: scale(4);
-ms-transform: scale(4);
transform: scale(4);
display: block;
position: fixed;
top: 50%;
left: 50%;
margin-top: -194px;
margin-left: -190px;
}
</style>
</head>
<body>
<li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li>
<li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li>
<li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li>
<li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li>
<li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li>
<li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li>
<li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li>
</body>
</html>
解决方案2
0 2016-05-31 07:28:13
您可以在悬停时使用position： absolute或fixed ，并根据屏幕管理图像的位置。
解决方案3
0 2016-05-31 07:31:33
这确实是可能的，在您当前的CSS中进行少量编辑。
.parentimage:hover {
-moz-transform: scale(4);
-webkit-transform: scale(4);
-o-transform: scale(4);
-ms-transform: scale(4);
transform: scale(4);
position: fixed;
top: 50%;
left: 50%;
margin-left: -75px;
margin-top: -65px;
}
注意：这可能无法按预期工作。 例如，图像位于左上角。 用户将其悬停并且图像过渡到页面的中心。 因为它移动，光标离开图像，导致图像过渡回左上角。 然后光标再次盘旋...等
看一个例子：
图像悬停缩放在表格内不起作用（被thead / tfoot阻止）
[英]Image hover scaling not working inside a table (blocked by thead/tfoot)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.