How to Skew Only the Ends of Images in a CSS Grid Container?

Unskewing the Ends of an Assortment of Multiple Skewed Images

In a previous question, a solution was found to skew an assortment of images. While the code allowed for each image to be resized, it did not provide the desired effect of skewing the far left and far right boxes exclusively within the inner portion of the container.

To achieve this, a more refined solution has been crafted, as demonstrated by an article published on CSS-Tricks. This method enables the addition of hover effects and gaps between the images.

The New Code

.gallery {
  --s: 50px; /* control the slanted part */  
  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%);
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  align-content: center;
  background: #ECD078;

The above is the detailed content of How to Skew Only the Ends of Images in a CSS Grid Container?. For more information, please follow other related articles on the PHP Chinese website!