响应式布局需求：大屏(<900px)图片hover显覆盖Div，小屏(≥900px)并排

Got it, let's solve this responsive layout problem where we need one single content div to switch between overlaying an image on larger screens and sitting side-by-side with it on smaller devices. This keeps your markup clean and avoids duplicating content—perfect for DRY code!

First, Fix the Screen Size Threshold (Quick Note) #

I think you might have mixed up the screen size labels: typically, "larger screens" are ≥900px and "smaller/medium screens" are <900px. I’ll build the solution around this logical setup, but you can swap the media query values if your original intent was reversed.

Step 1: HTML Structure #

We’ll wrap the image and content div in a container to control their positioning. Here’s a complete version based on your existing code snippet:

<div class="col col-6 text-center image-container">
  <img src="your-image-path.jpg" alt="Product/Content Preview" class="responsive-image">
  <div class="content-panel">
    <h4>Your Heading</h4>
    <p>Short descriptive text about the content here.</p>
    <button class="cta-btn">Learn More</button>
  </div>
</div>

Step 2: CSS Solution #

We’ll use CSS positioning and media queries to toggle the layout, plus hover states for the overlay effect:

/* Base styles for the container */
.image-container {
  position: relative; /* Needed for absolute positioning on large screens */
  width: 100%;
  margin: 1rem 0;
}

/* Make image responsive */
.responsive-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Default styles for content panel (applies to smaller screens first) */
.content-panel {
  padding: 1.5rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  margin-top: 1rem;
}

/* CTA button styling (adjust as needed) */
.cta-btn {
  padding: 0.5rem 1.25rem;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Larger screens (≥900px): Overlay effect on hover */
@media (min-width: 900px) {
  .image-container {
    overflow: hidden; /* Prevent overlay from spilling outside */
  }

  .content-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8); /* Semi-transparent background for overlay */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    margin-top: 0;
    border: none;
  }

  .image-container:hover .content-panel {
    opacity: 1; /* Show overlay on hover */
  }

  .cta-btn {
    background: #ffffff;
    color: #007bff;
  }
}

How It Works #

• Smaller screens (<900px): The content div sits directly below the image. If you want true side-by-side on small screens (without cramping), adjust the base .image-container to use flexbox:

  .image-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    position: static; /* Override relative positioning */
  }
  .responsive-image, .content-panel {
    flex: 1 1 280px; /* Let items grow/shrink, minimum width 280px */
  }
  

• Larger screens (≥900px): The content div is absolutely positioned over the image, hidden by default. Hovering over the container fades it in with a semi-transparent background.
• Single Div Reuse: We never duplicate the .content-panel—it adapts its layout entirely via CSS media queries.

Customization Tips #

• Tweak the background value in the media query to change the overlay’s transparency or color.
• Adjust the transition property to make the hover animation faster or slower.
• Modify the flex properties to control how the image and content div share space on smaller screens.

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