首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >悬停尺度上的CSS --从画廊水平方向看单幅图像

悬停尺度上的CSS --从画廊水平方向看单幅图像
EN

Stack Overflow用户
提问于 2022-09-14 12:29:45
回答 1查看 39关注 0票数 2

我有一个画廊的石头,并希望使单一图像宽度更大的悬停和其他图像的宽度更小。悬停前的画廊:

例如,当我悬停在黑石上时,想要像这样:

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-09-14 12:35:12

Flexbox可以做到这一点。

代码语言:javascript
运行
复制
.gallery {
  display: flex;
  height: 300px;
}
.gallery > img {
  flex: 1;
  min-width: 0;
  object-fit: cover;
  cursor: pointer;
  transition: .5s;
}
.gallery > img:hover {
  flex: 2; 
}
代码语言:javascript
运行
复制
<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>

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73716874

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档