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:
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:
Flexbox可以做到这一点
.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>