How to Unskew the Edges of a Skewed Image Gallery?

Unskewing the Ends of Skewed Image Assortments

Introducing the Issue:

In a previous discussion, a method for skewing an arrangement of images was discovered, which yielded satisfying results. However, the challenge now lies in unskewing the far left and right ends of the skewed container environment, targeting only the inner portions of these specific images.

Unskewing the Ends:

To achieve this effect, we present an improved solution:

<div class="gallery">
  <img src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="Image 1">
  <img src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="Image 2">
  <img src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="Image 3">
  ...
  <img src="/static/imghwm/default1.png" data-src="imageN.jpg" class="lazy" alt="Image N">
</div>

.gallery {
  --s: 50px; /* Control the skewed portion */

  display: grid;
  height: 350px;
  gap: 8px;
  grid-auto-flow: column;
  place-items: center;
}

.gallery > img {
  width: 0;
  min-width: calc(100% + var(--s));
  height: 0;
  min-height: 100%;
  object-fit: cover;
  clip-path: polygon(var(--s) 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
  cursor: pointer;
  transition: .5s;
}

.gallery > img:hover {
  width: 15vw;
}

.gallery > img:first-child {
  min-width: calc(100% + var(--s)/2);
  place-self: start;
  clip-path: polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
}

.gallery > img:last-child {
  min-width: calc(100% + var(--s)/2);
  place-self: end;
  clip-path: polygon(var(--s) 0,100% 0,100% 100%,0 100%);
}

This approach ensures that the first and last images in the gallery will have a skewed inner portion while the far left and right sides remain unskewed. The --s variable allows for further customization of the skewed area.

The above is the detailed content of How to Unskew the Edges of a Skewed Image Gallery?. For more information, please follow other related articles on the PHP Chinese website!