悬停时放大图像 [英] Image Enlarge on Hover

问题描述

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

你好

我正在尝试在悬停时放大图像并使用轻松过渡.它有效，但有时似乎会出错.我试图通过设置来解决这个问题:

I'm trying to have an image enlarge on hover and use an ease transition. It works, but it seems to bug out sometimes. I tried to fix this by setting:

-webkit-transition-property: height,width;

但无济于事.此外，我试图了解此代码的作者(我从 CSS 博客中获得了一些代码)是如何实现这一点的.我了解悬停图像如何改变其宽度，但我不确定作者为什么设置负的顶部和左侧值.我一直在尝试编辑宽度、高度、顶部和左侧以获得悬停时所需的大小，但它似乎变得倾斜 - 可能是因为我不明白负的顶部和左侧值在做什么.任何人都可以对此有所了解吗?我读过一些关于负边距的文章，但我不明白这里做了什么.

But to no avail. Also, I'm trying to understand how the author of this code (I got some of the code from a CSS blog) achieves this. I understand how on hover the image changes its width, but I'm not sure why the author is setting negative top and left values. I have been trying to edit the width, height, top, and left to get the desired size on hover, but it seems to become skewed - probably because I don't understand what the negative top and left values are doing. Can anyone shine some light on this? I've read some articles on negative margins, but I don't understand what's being done here.

代码如下:

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

推荐答案

top:-50px;left:-35px; CSS中的规则是用来保持图片放大后中心点不变的.否则，当图像放大时，您会感觉到它被移到了右下侧.

The top:-50px; left:-35px; rule in CSS is used to keep the image's center-point unchanged after it is enlarged. Otherwise, when image is enlarged, you will feel it is moved to right-bottom side.

然而，这不是一个好的设计——宽度/高度的变化需要在每个动画帧上计算新的布局和重绘 UI 元素，这是非常昂贵的(你可以查看这个 SO 重绘和回流之间的区别).这就是为什么你会觉得它有时似乎出问题了."

However, this is not a good design -- width/height change requires calculating new layout and redraw UI elements on every animation frame, which is very expensive (you can check this SO for difference between repaint and reflow). That's why you feel "it seems to bug out sometimes."

更好的方法是使用transform.请检查解决问题的 jsfiddle.新的 CSS 代码是:

A better way is using transform. Please check the jsfiddle that fix the issue. The new CSS code is:

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

这篇关于悬停时放大图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！