My goal is to minimize the space between my images that expand on hover.
I aim for it to resemble this: expectation
However, the current appearance is more like this: reality
This is what I currently have:
.container {
display: flex;
width: 100%;
box-sizing: border-box;
padding: 0 15%;
height: 100vh;
}
.mask {
flex: 1;
clip-path: polygon(40% 0, 60% 0, 30% 100%, 10% 100%);
transition: 0.2s ease-in;
gap: 2px;
}
.mask>img {
width: 100%;
height: calc(100% - 10vh);
object-fit: cover;
}
.mask:hover {
flex: 1 2 5%;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}<div class="container">
<div class="mask">
<img src="https://picsum.photos/id/22/4434/3729">
</div>
<div class="mask">
<img src="https://picsum.photos/id/15/2500/1667">
</div>
<div class="mask">
<img src="https://picsum.photos/id/10/2500/1667">
</div>
<div class="mask">
<img src="https://picsum.photos/id/3/5000/3333">
</div>
</div>I experimented with margins, even resorting to negative values, but it didn't yield the desired outcome.
Any guidance would be greatly appreciated. Thank you.