如何保持悬停时显示的图像特定信息始终显示在同一位置？

Answer 1

/* Timeline layout */
    .timeline {
      display: flex;
      position: relative;
      /* Adjust other properties for the horizontal row */
    }
    
    /* Adjust spacing between items */
    .timeline-item {
      
      margin-right: 10px; /* Remove spacing between items */
      overflow: hidden; /* Ensure contents don't overflow */
    }
    
    .thumbnail img {
      width: 100%; /* Ensure the thumbnail image fills its container */
    }
    
    /* Initial hide for the info-box */
    .info-box {
      display: none;
      /* Additional styling for the info box */
    }
    
    /* Hover effect */
    .timeline-item:hover .info-box {
      display: block;
      position: absolute;
      left: 0;
      /* Other hover styles */
    }

<div class="timeline">
  <div class="timeline-item">
    <div class="thumbnail">
      <img src="https://images.pexels.com/photos/2437286/pexels-photo-2437286.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Project 1"> <!-- Replace # with the actual image URL -->
    </div>
    <div class="info-box">
      <h3>Project 1</h3>
      <p>Log-line: A captivating journey through time and space.</p>
      <h4>Credits:</h4>
      <ul>
        <li>Director: John Doe</li>
        <li>Producer: Jane Smith</li>
        <li>Editor: Alex Johnson</li>
      </ul>
      <div class="video-container">
        <!-- Embedded video for the first film -->
        <iframe src="https://player.vimeo.com/video/387034973" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
      </div>
    </div>
  </div>
  <div class="timeline-item">
    <div class="thumbnail">
      <img src="https://images.pexels.com/photos/288100/pexels-photo-288100.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Project 2"> <!-- Replace # with the actual image URL -->
    </div>
    <div class="info-box">
      <h3>Project 2</h3>
      <p>Log-line: An epic tale of courage and sacrifice.</p>
      <h4>Credits:</h4>
      <ul>
        <li>Director: Sarah Johnson</li>
        <li>Producer: Michael Brown</li>
        <li>Editor: Emily Adams</li>
      </ul>
      <div class="video-container">
        <!-- Embedded video for the second film -->
        <iframe src="https://player.vimeo.com/video/759472047" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>