Javascript 悬停时，向上移动文本

所以，当你把鼠标悬停在图片上时，我试图将文本向上移动，但我似乎无法让它工作。我尝试使用：悬停，然后使用填充底部将其向上移动，但没有效果。因此，我基本上希望文本“自然”或“孟加拉虎”在图像上方悬停时向上移动。这里有一张图片，说明了我想要实现的目标

这是代码

HTML

<section id="top-container" class="top-column" style="width:1050px; height:400px; ">

<div class="image" style="float:left;"><img src="http://www.hdwallpapersinn.com/wp-content/uploads/2012/09/HD-Wallpaper-1920x1080.jpg" border="0"; width="263"; height="200" style="display: block; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; border-right: 1px solid #dddddd;">
<h4 style="font-size:30px; top: 90px; ">Nature</h4>
</div>

<div class="image" style="float:left;"><img src="http://www.hdwallpapersart.com/wp-content/uploads/2013/04/tiger_wallpapers_hd_Bengal_Tiger_hd_wallpaper1.jpg" border="0"; width="262"; height="200" style="display: block; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; ">
<h4 style="font-size:30px; top: 90px;">Bengal Tiger</h4>
</div>

</section>

---

像这样的怎么样：

.image:hover h4 {
    margin-top: -50px;
}

---

使用

top:90px

将文本绝对相对于

div.image

元素放置。在底部添加填充不会改变这一点，它只会在文本下方添加一些填充。如果在文本中添加可见边框，则可以看到这一点

处理此问题的最简单方法是在鼠标悬停图像时更改文本的顶部位置。看

---

注意：我只更新了第一张图像，以便您可以比较这两个元素以查看差异。

您应该检查css

位置：绝对；浮动：左；位置：绝对位置
.image:hover h4 {
    margin-top: -50px;
}