请求CSS图片画廊示例代码库：自制版本效果欠佳需参考

Got it, let’s dive into some practical, customizable CSS image gallery implementations you can use as a reference to refine your version. Each example includes clean, commented code so you can tweak it to fit your exact needs.

1. Basic Responsive Grid Gallery #

This is a no-frills, fully responsive gallery that adapts seamlessly to any screen size—perfect for a clean, organized layout.

<div class="grid-gallery">
  <div class="gallery-item">
    <img src="your-image-1.jpg" alt="Image description">
  </div>
  <div class="gallery-item">
    <img src="your-image-2.jpg" alt="Image description">
  </div>
  <div class="gallery-item">
    <img src="your-image-3.jpg" alt="Image description">
  </div>
  <div class="gallery-item">
    <img src="your-image-4.jpg" alt="Image description">
  </div>
  <!-- Add more items as needed -->
</div>

.grid-gallery {
  display: grid;
  /* Auto-adjust columns based on screen width */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem; /* Space between images */
  padding: 1rem;
}

.gallery-item img {
  width: 100%;
  height: 200px; /* Fixed height for uniform rows */
  object-fit: cover; /* Crop images to fit without distortion */
  border-radius: 8px; /* Optional rounded corners */
}

/* Optional hover effect for interactivity */
.gallery-item img:hover {
  transform: scale(1.03);
  transition: transform 0.3s ease;
}

Quick tweaks: Adjust minmax(250px, 1fr) to change the minimum width of each gallery item. Swap object-fit: cover with contain if you want to show full images instead of cropping.

2. Interactive Hover Gallery with Captions #

This gallery adds a polished hover effect that reveals image captions—great for adding context to your photos without cluttering the layout.

<div class="hover-gallery">
  <div class="gallery-card">
    <img src="your-image-1.jpg" alt="Image description">
    <div class="caption">
      <h3>Image Title</h3>
      <p>Short, descriptive text here</p>
    </div>
  </div>
  <div class="gallery-card">
    <img src="your-image-2.jpg" alt="Image description">
    <div class="caption">
      <h3>Another Image Title</h3>
      <p>Another quick description</p>
    </div>
  </div>
  <!-- Add more cards -->
</div>

.hover-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 1rem;
}

.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Soft shadow for depth */
}

.gallery-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7); /* Semi-transparent overlay */
  color: white;
  padding: 1.5rem;
  transform: translateY(100%); /* Hide caption by default */
  transition: transform 0.4s ease;
}

.gallery-card:hover img {
  transform: scale(1.1); /* Zoom image on hover */
}

.gallery-card:hover .caption {
  transform: translateY(0); /* Slide caption into view */
}

Quick tweaks: Change rgba(0,0,0,0.7) to adjust the caption overlay opacity. Swap translateY(100%) with translateX(-100%) if you want the caption to slide in from the left instead.

3. CSS-Only Masonry Gallery (For Variable Height Images) #

If your images have different heights, this masonry layout arranges them neatly without gaps—no JavaScript required.

<div class="masonry-gallery">
  <div class="masonry-item">
    <img src="tall-image.jpg" alt="Tall vertical image">
  </div>
  <div class="masonry-item">
    <img src="wide-image.jpg" alt="Wide horizontal image">
  </div>
  <div class="masonry-item">
    <img src="medium-image.jpg" alt="Medium square image">
  </div>
  <!-- Add more items -->
</div>

.masonry-gallery {
  columns: 3; /* Number of columns */
  column-gap: 1.5rem;
  padding: 1rem;
}

.masonry-item {
  break-inside: avoid; /* Prevent images from splitting across columns */
  margin-bottom: 1.5rem;
  border-radius: 8px;
  overflow: hidden;
}

.masonry-item img {
  width: 100%;
  display: block;
  transition: opacity 0.3s ease;
}

.masonry-item img:hover {
  opacity: 0.8; /* Fade effect on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .masonry-gallery {
    columns: 2;
  }
}

@media (max-width: 480px) {
  .masonry-gallery {
    columns: 1;
  }
}

Quick tweaks: Modify the columns value to adjust how many images appear side-by-side. The break-inside: avoid property is key to keeping images intact within columns.

All these examples are self-contained and don’t rely on external libraries, so you can drop them into your project and customize colors, spacing, animations, and layout to match your desired effect.

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