CSS悬停图像

我正在为一些爱车的老家伙做一个网站。他们以前的照片库已经不再使用了，他们问我是否可以制作一个新的。我希望它尽可能简单。所以我做了一张小图片表。一旦你将鼠标悬停在一个图像上，它就会变大，这些人告诉我他们喜欢我的想法。如果单击图像，它将直接转到图像URL

问题是从原来的尺寸过渡到更大的尺寸，这使得悬停时看起来很不协调。我希望过渡更顺利，有什么建议吗

这是该网站的链接-

以下是我的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{
宽度：125px；
高度：100px；
边框：2件纯黑；
位置：相对位置；
转变：z指数0，转变0.5；
}
img：悬停{
z指数：1；
转换：比例（2.5）；
}

---

我建议使用

变换：缩放

，因为更改宽度/高度会破坏布局流程

.model img{
宽度：125px；
高度：100px；
边框：2件纯黑；
位置：相对位置；
转变：z指数0，转变0.5；
}
img：悬停{
z指数：1；
转换：比例（2.5）；
}

---

将位置更改为“相对”对我来说解决了这个问题，我相信其他答案也会奏效。我看看他们怎么想。谢谢大家!

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

---

把位置改成“相对”对我来说解决了这个问题，我相信其他答案也会奏效。我看看他们怎么想。谢谢大家!

.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

transition

属性了吗？我添加了一个用于转换的webkit，但是我仍然从一张图片到另一张图片中看到一些愚蠢的东西。不过很酷！看起来已经应用了转换。他说它看起来像是一个小故障，这是因为当你们悬停的时候，图像变得更大，并且因为它的绝对位置而向下移动。所以你不是在它上面徘徊。将您的图像悬停设置为相对位置，然后查看它的行为。您查看过CSS

transition

属性吗？我添加了用于转换的webkit，但我仍然从一张图片到另一张图片中看到一些愚蠢的东西。不过很酷！看起来已经应用了转换。他说它看起来像是一个小故障，这是因为当你们悬停的时候，图像变得更大，并且因为它的绝对位置而向下移动。所以你不是在它上面徘徊。将图像悬停设置为相对位置，然后查看其行为。