Question

//编辑：更新了笔，所以每个人都可以看到解决方案！ Click here

我想要的很简单（在我看来）。我想制作一个图像，当你将鼠标悬停在上方时，它会被放大但不会变大。我在Pen中试过这个，这里是链接：Click here

这里是我用于图像的CSS：

.image {
  width: 100px;
  transition: all 0.5s;
}

.image:hover {
  width: 120px;
  transition: 0.5s;
}

（只做了“变得更大”的动画，因为我不知道如何做这个“边界”的事情）

一个例子是按钮，但他仍然有点上升，我猜这与图像有同样的问题。

Answer 1

您可能希望稍微更改一下代码，但这是可能的。查看此fiddle以查看您的示例已编辑即可使用。

基本上你将图像放在一个div中并将你想要放大的图像设置为背景图像，然后在悬停时缩放背景图像

div.horizontalboxes:hover { background-size: 200px 150%; }

这很简单。

希望您发现此答案有帮助，如果您有任何其他问题，请随时发表评论。

Answer 2

检查这个小提琴..你需要什么？

考虑以下示例

<div class="wrapper">
  <a href="javascript:void(0)">
  <img src="http://files.braadmartin.com/gretsch-catalina-club-in-natural.jpg" width="250" height="250" />
</a>
<a href="javascript:void(0)">
  <img src="http://files.braadmartin.com/gretsch-catalina-club-in-natural.jpg" width="250" height="250" />
</a>  
<a href="javascript:void(0)">
  <img src="http://files.braadmartin.com/gretsch-catalina-club-in-natural.jpg" width="250" height="250" />
</a>
</div>

和css

 .wrapper {
  width: 250px;
  height: 250px;
  text-align: center;
}

.wrapper img {
  margin: 4% 0;
  height: 92%;
  width: auto;
}

.wrapper img:hover {
  margin: 0;
  height: 100%;
}

这里是小提琴

https://jsfiddle.net/65bpLp9y/

Answer 3

尝试使用css transform属性

.image:hover {
    webkit-transform: scale(1.2);
    ms-transform: scale(1.2);
    transform: scale(1.2);
}

将图像固定到边框（CSS）

3 个答案: