我有一个画廊的石头,并希望使单一图像宽度更大的悬停和其他图像的宽度更小。悬停前的画廊:
例如,当我悬停在黑石上时,想要像这样:
发布于 2022-09-14 12:35:12
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>
https://stackoverflow.com/questions/73716874
复制相似问题