CSS过渡/动画问题：内部div无法从top:100%滑至bottom:0

Hey there! Let’s get that slide-up overlay working correctly. The main issues likely come from missing positioning rules, overflow handling, or incorrect transition setup. Here’s a step-by-step solution tailored to your needs:

1. HTML Structure #

First, let’s define a clean container layout with your content and overlay:

<div class="outer-container">
  <div class="dynamic-content">
    Your dynamically changing text goes here—its height will adjust automatically based on content length, and we’ll ensure it never exceeds the outer container.
  </div>
  <div class="slide-overlay">
    Overlay content (e.g., descriptions, actions) that slides up on hover
  </div>
</div>

2. Core CSS Solution #

The key is proper positioning, overflow control, and transition targeting. Here’s the CSS that will make the animation work as expected:

/* Outer container setup */
.outer-container {
  position: relative; /* Critical: makes child absolute elements relative to this container */
  width: 320px; /* Adjust to your needs */
  height: 280px; /* Fixed or max-height works here */
  border: 1px solid #ddd;
  overflow: hidden; /* Hides the overlay when it's outside the container initially */
}

/* Dynamic content area */
.dynamic-content {
  padding: 1.2rem;
  max-height: 100%; /* Ensures content never overflows the outer container */
  /* No fixed height needed—height adapts to text automatically */
}

/* Slide-up overlay */
.slide-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(30, 30, 30, 0.85);
  color: #fff;
  padding: 1.2rem;
  transition: transform 0.35s ease; /* Smooth transition for the slide effect */
  transform: translateY(100%); /* Start fully outside the container (below it) */
}

/* Hover trigger to slide the overlay up */
.outer-container:hover .slide-overlay {
  transform: translateY(0); /* Slide into place, aligning with container bottom */
}

3. Key Fixes & Explanations #

• Relative Positioning on Outer Container: Without position: relative, the overlay would position itself relative to the page body instead of your container—this breaks the animation entirely.
• Overflow: Hidden: This hides the overlay when it’s initially positioned outside the container, so users don’t see it until hover.
• Transform for Animation: Using transform: translateY() is more reliable than adjusting top/bottom if your overlay’s height is dynamic (since it adapts to the overlay’s own content height automatically). The transition is applied directly to the transform property for smooth movement.
• Dynamic Content Height: The .dynamic-content element uses default block behavior to adjust its height to the text, and max-height: 100% ensures it never spills outside the outer container.

4. Optional Adjustments #

If you want the overlay to cover the entire container instead of just its own content height, modify the overlay CSS to:

.slide-overlay {
  position: absolute;
  top: 100%; /* Start at the bottom edge of the container */
  left: 0;
  right: 0;
  height: 100%; /* Cover full container height */
  background-color: rgba(30, 30, 30, 0.85);
  color: #fff;
  padding: 1.2rem;
  transition: top 0.35s ease;
}

.outer-container:hover .slide-overlay {
  top: 0; /* Slide up to cover the entire container */
}

This will make the overlay slide up to fill the whole outer container, regardless of its content length.

内容的提问来源于stack exchange，提问作者Ryan Yang