CSS-only Gallery with Skewed Images and Hover Effects

This is a CSS-only photop gallery that creates a responsive grid of images with unique, angled borders.

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; /* Removes rounded corners */    margin: 0; /* 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.