CSS on hover scale the single image from gallery horizontally

userMvKt 0
Viewed 25

I have a gallery of stones and want to make single image width bigger on hover and other images' widths smaller. gallery before hover: enter image description here

want to be like this when I hover for example black stone: css

gallery css html
1 Answers

Flexbox can do this

.gallery {
  display: flex;
  height: 300px;
}
.gallery > img {
  flex: 1;
  min-width: 0;
  object-fit: cover;
  cursor: pointer;
  transition: .5s;
}
.gallery > img:hover {
  flex: 2; 
}
<div class="gallery">
  <img src="https://picsum.photos/id/433/600/400" alt="A Bear">
  <img src="https://picsum.photos/id/582/600/400" alt="A wolf">
  <img src="https://picsum.photos/id/1074/600/400" alt="A lioness">
  <img src="https://picsum.photos/id/659/600/400" alt="A kind wolf">
  <img src="https://picsum.photos/id/593/600/400" alt="A Tiger">
</div>

Temani Afif0
Related