当鼠标悬停于图片，从图片下端上浮导航文字

要实现这个效果，可以使用CSS中的:hover伪类和transition属性。具体步骤如下：

1. 在HTML中，将图片和导航文字都包装在一个父元素中，如下所示：

<div class="image-container">
  <img src="your-image-url">
  <div class="text-container">
    <a href="#">导航文字</a>
  </div>
</div>

2. 在CSS中，设置父元素的position属性为relative，子元素的position属性为absolute，并将导航文字下移一定距离，如下所示：

.image-container {
  position: relative;
}

.text-container {
  position: absolute;
  bottom: -30px;
  width: 100%;
  text-align: center;
  transition: bottom 0.3s ease;
}

3. 使用:hover伪类，当鼠标悬停在图片上时，将导航文字上浮一定距离，如下所示：

.text-container:hover {
  bottom: 0;
}

这样，当鼠标悬停在图片上时，导航文字就会上浮显示出来。你可以根据需要调整浮动距离和过渡时间。