CSS悬停图像[关闭]答案

【问题标题】：CSS Hover Images [closed]CSS悬停图像[关闭]
【发布时间】：2016-08-16 04:19:17
【问题描述】：

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

【问题讨论】：

你查看过 CSS transition 属性吗？
我添加了 webkit 以进行过渡，但我仍然得到一些从一张图片到另一张图片的愚蠢的东西。不过很酷的东西！
看起来已经应用了过渡。他说它看起来像是有故障，那是因为当您悬停时，图像会变大并向下移动，因为它的绝对定位。所以你没有悬停在它上面。将您的图像悬停设置为相对位置并查看它的行为。

标签： css image hover

【解决方案1】：

我建议使用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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

将位置更改为相对为我解决了这个问题，我相信其他答案也会起作用。我看看大伙怎么想的。谢谢大家！

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

【讨论】：