CSS-only Gallery with Skewed Images and Hover Effects

It utilizes modern CSS properties like flexbox, border-radius, and the experimental corner-shape to morph images from skewed parallelograms into full rectangles when hovering over.

Features:

• Modern CSS Properties: Uses corner-shape: bevel for unique geometric shapes with automatic fallback support.
• Flexible Layout: Works with any number of images and automatically adjusts spacing with CSS Grid flexbox.
• Smooth Animations: CSS transitions handle all hover effects at 60fps.
• Responsive Design: Images scale proportionally across all screen sizes using flexible units.
• Browser Fallback: Includes @supports query for graceful degradation in browsers without corner-shape support.
• Customizable Skew: Single CSS variable controls the degree of image skewing across the entire gallery.

See It In Action:

How To Use It:

1. Create a container div with the class gallery. Place your img tags directly inside this container. You can add as many images as needed. Flexbox handles the distribution.

<div class="gallery">
  <img src="1.jpg" alt="A Bear">
  <img src="2.jpg" alt="A wolf">
  <img src="3.jpg" alt="A lioness">
  ...
</div>

<!-- Right-to-left gallery for RTL languages -->
<div class="gallery" style="direction: rtl;">
  <img src="1.jpg" alt="A Bear">
  <img src="2.jpg" alt="A wolf">
  <img src="3.jpg" alt="A lioness">
  ...
</div>

2. Apply the following CSS rules to create the skewed gallery effect with hover animations.

.gallery {
  --s: 50px; /* Controls the skew angle - increase for more dramatic effect */
  
  display: flex; /* Creates horizontal layout */
  gap: 10px; /* Spacing between images */
  margin: 10px;
}

.gallery > img {
  flex: 1; /* Each image takes equal space */
  min-width: 0; /* Prevents flex items from overflowing */
  height: 300px; /* Fixed height for uniform appearance */
  object-fit: cover; /* Crops images to fill space without distortion */
  
  /* Creates the skewed/beveled corner effect */
  border-start-start-radius: var(--s) 100%;
  border-end-end-radius: var(--s) 100%;
  
  margin-inline-end: calc(-1*var(--s)); /* Overlaps images slightly */
  corner-shape: bevel; /* Modern CSS property for beveled corners */
  cursor: pointer; /* Indicates interactivity */
  transition: .3s linear; /* Smooth animation on hover */
}

/* Expands the hovered image */
.gallery > img:hover {
  flex: 1.6; /* Makes hovered image 60% larger */
}

/* Removes top-left radius on first image and adjacent to hover */
.gallery > img:is(:first-child,:hover),
.gallery > img:hover + * {
  border-start-start-radius: 0 100%;
}

/* Removes bottom-right radius on last image and before hover */
.gallery > img:is(:last-child,:hover),
.gallery > img:has(+ :hover) {
  border-end-end-radius: 0 100%;
  margin-inline-end: 0; /* Removes overlap for proper alignment */
}

body {
  background: #efd994; /* Optional background color */
}

/* Fallback for browsers without corner-shape support */
@supports not (corner-shape: bevel) {
  .gallery > img {
    border-radius: 0!important; /* Removes rounded corners */
    margin: 0!important; /* Removes overlap effect */
  }
}

FAQs

Q: Why don’t the beveled corners appear in Firefox or Safari?
A: The corner-shape: bevel property is currently only supported in Chromium-based browsers (Chrome, Edge, Opera). The @supports fallback automatically removes the skewed effect in unsupported browsers.

Q: How do I prevent layout shifts when images load?
A: Add explicit width and height attributes to your img tags. This reserves space before images load. You can also set min-height on the gallery container or use aspect-ratio properties.

Q: How can I make this gallery work vertically instead of horizontally?
A: Change display: flex to display: flex; flex-direction: column. Then swap the logical properties: use border-start-start-radius and border-start-end-radius for horizontal corners instead of diagonal ones. The hover expansion will work vertically.

The post CSS-only Gallery with Skewed Images and Hover Effects appeared first on CSS Script.