Javascript 弹性缩略图菜单-css不会使图像底部粘住

我发现了一种快速简单的动画技术，可以添加到我的缩略图库中，技术就在这里

我已经实现了没有问题，但是对我来说，css似乎不能确保图像像在给定的演示示例中一样保持在相同的级别上

这意味着当我把鼠标悬停在一个图像上，图像放大时，其他所有的图像也会移动。我希望它能像演示一样工作，更像是“苹果船坞”类型的动画。请参阅下面的代码：

和

JS

HTML

---

您的代码看起来不错

下面是您的代码。。我只更改了图像URL

如果你是说

我希望它能像演示一样工作，更像是“苹果船坞”类型的动画。 css似乎无法确保图像与给定演示中的图像保持相同的水平

其他图像在演示中似乎不会下降，但在您的情况下会下降

你的菜单风格不对

 #menu{
  position:absolute;
  bottombottom:0;
} 

正确的是

#menu{
  position:absolute;
  bottom:0;
}  

---

这里是

准备一个JSFIDLE并在这里共享。我会这样做，但它没有代码，不知道为什么我不能在那里复制它。我把图像排成一行，但仅此而已。“我会很快仔细看一下，然后给你发邮件。”约翰法雷尔会看到我的答案的。另外，为了让Jquery在JSFIDLE中运行，您需要在左上角的

框架和扩展中选择
Jquery版本
选项将原始演示添加到问题中。将原始演示添加到问题中我在前面尝试过，因为我在演示中看到了此错误（忘记在此处输入更正的css！）但是在我的页面上不起作用，所以我想我的代码在其他地方还有一些问题。这是我的页面，带有更正后的css。首先，它应该位于文本下方，其次，它不会像JSFIDDLE一样“粘”在底部。请将其置于文本下方。我认为您需要添加新的div，作为
更左的交互式
的子级，在其中您将拥有所有文本。。。然后您将有
menuitems
感谢您对jsfiddel的帮助，现在就对它进行排序。正如你所说，这把小提琴工作得很好（最上面一行的图片确实如此，我想我需要更多的编辑来阻止下一行推到最上面一行），但是实际页面上的代码完全相同（我之前给出的tinyurl.com/bmchjvf链接）在页面的高处显示图像并覆盖文本，而且图像不会像JSFIDLE一样粘在底部，即使在小提琴上，图像也会覆盖最后一行文本
<div id="menuwrapper">  
<div id="menu">  
  <a href="/interactive/cis/PaycoCISBrochure.html" class="menuitem">
    <img   class="interactive_img" src="/images/Payco-CIS-interactive.png">
  </a><!--Template for each menu item-->  
  <a href="/interactive/PU/PaycoUmbrellaBrochure.html" class="menuitem">
    <img class="interactive_img" src="/images/Payco-Umbrella-interactive.png">
  </a>
  <a href="/interactive/tech/PaycoTechBrochure.html" class="menuitem">
    <img class="interactive_img" src="/images/Payco-Tech-interactive.png">
  </a>
  <a href="/interactive/media/PaycoMediaBrochure.html" class="menuitem">
    <img class="interactive_img" src="/images/Payco-Media-interactive.png">
  </a>
  <a href="/interactive/medical/PaycoMedicalBrochure.html" class="menuitem">
    <img class="interactive_img" src="/images/Payco-Medical-interactive.png">
  </a>
  <a href="/interactive/logistics/PaycoLogisticsBrochure.html" class="menuitem">
    <img class="interactive_img" src="/images/Payco-Logistics-interactive.png">
  </a>
  <a href="/interactive/SU/SimplyUmbrellaBrochure.html" class="menuitem">
    <img class="interactive_img" src="/images/Simply-Umbrella-interactive.png">
  </a>
</div>  
</div>  

 #menu{
  position:absolute;
  bottombottom:0;
} 

#menu{
  position:absolute;
  bottom:0;
}