图片放大悬停

Question

代码：https://jsfiddle.net/xakhLafd/

你好，

我想有一个图像放大悬停和使用的方便转换。它有效，但它似乎有时会出错。我试图通过设置来解决这个问题：

-webkit-transition-property: height,width; 

但无济于事。此外，我试图了解这个代码的作者（我从CSS博客获得了一些代码）是如何实现这一点的。我了解如何悬停图像改变其宽度，但我不知道为什么作者设置负值和左值。我一直试图编辑宽度，高度，顶部和左侧，以便在悬停时获得所需的大小，但它似乎变得偏斜 - 可能是因为我不明白负值和负值是做什么的。任何人都可以对此发光一些？我读过一些关于负面利润的文章，但我不明白这里做了什么。

下面的代码：

<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/> 
.thumbnail{ 
    width: 100px; 
    height: 100px; 
} 
.thumbnail:hover { 
    position:relative; 
    top:-50px; 
    left:-35px; 
    width:500px; 
    height:auto; 
    display:block; 
    z-index:999; 
    cursor: pointer; 
    -webkit-transition-property: all; 
    -webkit-transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease; 
} 

Answer 1

的top:-50px; left:-35px;规则CSS来保持图像的中心点不变，它放大了。否则，当图像放大时，您会感觉它被移到右下侧。然而，这不是一个好的设计 - 宽度/高度的变化需要在每个动画帧上计算新的布局和重绘UI元素，这是非常昂贵的（你可以检查这个SO重新绘制和回流之间的区别）。这就是为什么你觉得“它似乎有时会出错”。

更好的方法是使用transform。请检查修复问题的jsfiddle。新的CSS代码是：

.thumbnail{ 
    width: 100px; 
    height: 100px; 
    display:block; 
    z-index:999; 
    cursor: pointer; 
    -webkit-transition-property: all; 
    -webkit-transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease; 
} 
.thumbnail:hover { 
    transform: scale(5); 
} 

Answer 2

这里是修复该问题，我创建了小提琴。我摆脱了相对位置并将高度设置为auto而不是100px。

这里是我做的代码。

<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" 
class="thumbnail"/> 

.thumbnail{ 
    width: 100px; 
    height: auto; 
    position:relative; 
} 
.thumbnail:hover { 
    width:500px; 
    height:auto; 
    display:block; 
    z-index:999; 
    cursor: pointer; 
    -webkit-transition-property: all; 
    -webkit-transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease; 
} 

很抱歉忘了更新这里的小提琴是新的链接。

https://jsfiddle.net/xakhLafd/1/