Question

我在网站上为一些热爱汽车的老人工作。他们以前的照片库已不再使用，他们问我是否可以制作一个新照片库。我希望它尽可能简单。所以我制作了一张小图片表。一旦你将鼠标悬停在图像上它会变大，这些人告诉我他们喜欢我的想法。如果单击图像，它将直接转到图像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;
}

Answer 1

img.thumbnail {
    max-width:20%;
    max-height:50%;
    -webkit-transition: width 2s, height 2s, -webkit-transform 0.5s;
    /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 0.5s;
}
img.thumbnail:hover {
    -webkit-transform:scale(2);
    /* Safari and Chrome */
    -moz-transform:scale(2);
    /* Firefox */
    -ms-transform:scale(2);
    /* IE 9 */
    -o-transform:scale(2);
    /* Opera */
    transform:scale(2);
}

Fiddle

Answer 2

将位置改为亲戚解决了我，我相信其他答案也会起作用。我会看到这些家伙的想法。谢谢大家！

.model img{
    width: 125px;
    height: 100px;
  border: 2px solid black;
    z-index: 0;
-webkit-transition: width 2s, height 2s;
transition: width 2s, height 2s;
}

img:hover  {
width: 550px;
height: 450px;
z-index:1;
position: relative;
}

.model td{
    padding: 10px;
}

否则这个答案不会改变表格的布局，这是我最好的。

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

CSS悬停图像

2 个答案: