实现网页文字悬浮到图片的过渡效果

实现网页上文字悬浮到图片的过渡效果通常需要CSS和JavaScript配合。一种常见的做法是使用CSS的`position: relative;` 和 `position: absolute;` 属性，以及`transition` 或 `animation` 动画属性。以下是步骤：

1. 首先，将图片和文字都设置为相对定位(`position: relative;`)，这样文字可以相对于图片定位。

<div class="parent">
  <img src="image.jpg" alt="...">
  <p class="floating-text">文字内容</p>
</div>

2. 然后，将文字设为绝对定位(`position: absolute;`)，并设置初始位置，如 `top: -100%; left: 50%; transform: translateX(-50%);`，使其隐藏在图片下方。

.floating-text {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.5s ease;
}

3. 添加过渡效果，当鼠标悬停在图片上时，使用 JavaScript 或 CSS 的 `hover` 伪类改变文字的位置并触发动画，使其缓慢地移动到图片上方。

.parent:hover .floating-text {
  top: 0;
}

或者使用JavaScript:

const parent = document.querySelector('.parent');
parent.addEventListener('mouseover', () => {
  const floatingText = document.querySelector('.floating-text');
  floatingText.style.top = '0';
});
parent.addEventListener('mouseout', () => {
  const floatingText = document.querySelector('.floating-text');
  floatingText.style.transition = 'all 0.5s ease';
  floatingText.style.top = '-100%';
});