如何修复悬停图像的代码，然后以相同的分辨率显示该图像的放大版本？

Question

我目前正在写一个网站，下面是展望

​

。

理想情况下，我希望它向我显示相同的图像，但尺寸更大，分辨率相同。我所做的是有两个相同的图像，一个大的一个小的。下面是我的代码：

​

​

"heading div“是顶部的横幅，而"content div”是图像，以及我想要的悬停效果。我在网上找了很多不同的方法来解决这个问题，但我还是想不出怎么做，有人能帮我吗？

补充:为了更直接地了解我想要做的事情，我制作了这个Axure模型：http://muzuf7.axshare.com。这里的想法是在磁贴内部有一个较小的图像，并具有鼠标悬停功能。当悬停到较小的图像时，较大的图像显示在较小的图像的顶部。如果您像我一样使用Axure模拟进行交互，那就很清楚了。

Answer 1

如果我没理解错的话，你可以像下面这样做，你可以在悬停时增加图像的大小，但可以使用overflow: hidden将它包含在div中。显然，你可以使用变换或其他东西来使这个效果比这里更漂亮：

HTML：

<div class="content">
  <div id="magic">
  <a id="hover"><img src="img.png" alt="Vienna Parliament" /></a>
  </div>
</div>

CSS：

.content img {
  width: 100%;
  height: 100%;
}
#magic {
  max-width: 200px;
  max-height: 100px;
  overflow: hidden;
}
.content img:hover {
  width: 110%;
  height: 110%;
}

这就是你要找的东西吗？

Answer 2

你可以使用Scale on Hover with Transition来实现它。在这里我做了一个小演示。

​

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.item {
  position: relative;
  border: 1px solid #333;
  margin: 2%;
  overflow: hidden;
  width: 540px;
}
.item img {
  max-width: 100%;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

<div class="item">
  <img src=http://dummyimage.com/600x400/000/fff.png " width="540 " height="548 ">
  
  <div class="item-overlay top "></div>
</div>

​

有关更多细节和效果，请查看here