<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 6 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 6 年前。
我正在为一些喜欢汽车的老人开发一个网站。他们以前的照片库不再使用，他们问我是否可以制作一个新的。我希望它尽可能简单。所以我制作了一张很小的图像表。一旦你将鼠标悬停在图像上，它就会变大，这些人告诉我他们喜欢我的想法。如果您单击图像，它将直接转到图像 URL。
问题是从原始尺寸到较大尺寸的过渡使得悬停时出现这种故障现象。我希望过渡更顺利，有什么建议吗？
这是网站的链接 - http://tcrgv8club.org/photogallery.php
这是我的 CSS 代码:
.model img{
width: 125px;
height: 100px;
border: 2px solid black;
z-index: 0;
}
img:hover {
width: 500px;
height: 450px;
z-index:1;
position: absolute;
}
.model td{
padding: 10px;
}
最佳答案
我建议使用 transform: scale，因为更改宽度/高度会破坏您的布局流程。
.model img {
width: 125px;
height: 100px;
border: 2px solid black;
position: relative;
transition: z-index 0s, transform 0.5s;
}
img:hover {
z-index: 1;
transform: scale(2.5);
}<div class="model">
<img src="http://placehold.it/100x100" alt="">
<img src="http://placehold.it/100x100" alt="">
<img src="http://placehold.it/100x100" alt="">
</div>关于CSS 悬停图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38961018/