CSS on hover scale the single image from gallery horizontally-CodePudding

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

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

CodePudding user response：

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 >
  <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>