CSS 列计数和 css 转换

Question

我正在使用列数并且我有 div 上面有一个文本，悬停时从底部开始动画。它在所有项目上都没有表现出应有的问题。

.container {
  column-count: 3;
  column-gap: 0;
position: relative;

}

.item {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  position: relative;

}

.item:hover .desc {
  transform: translateY(-99%);
}

.image {
  width: 100%;
}

.image img {
  display: block;
  width: 100%;
}

.desc {
  top: 100%;
  height: auto;
  transition: transform 0.2s ease-out;
  position: absolute;
  left: 0;
color:#ccc;
  background: #353b49;
  padding: 10px;
  margin: 0;
  width: 100%;

  overflow: hidden;
  box-sizing: border-box;
  line-height: normal;
  z-index: 10;
}

<div class="container">

  <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
   <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
   <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
   <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
   <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
   <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>

</div>

Answer 1

而不是 top:100% 使用 bottom:0 并反转转换。好像效果更好。

.container {
  column-count: 3;
  column-gap: 0;
position: relative;

}

.item {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  position: relative;

}

.item:hover .desc {
  transform:translateY(0%);
}

.image {
  width: 100%;
}

.image img {
  display: block;
  width: 100%;
}

.desc {
  bottom: 0;
  height: auto;
  transform:translateY(100%);
  transition: transform 0.2s ease-out;
  position: absolute;
  left: 0;
color:#ccc;
  background: #353b49;
  padding: 10px;
  margin: 0;
  width: 100%;

  overflow: hidden;
  box-sizing: border-box;
  line-height: normal;
  z-index: 10;
}

<div class="container">

  <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
   <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
   <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
   <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
   <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
   <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>

</div>

Answer 2

我会以不同的方式处理这个问题。正如@TemaniAfif 已经提到的，使用 bottom 值而不是 top 会容易得多。

然而，在您的情况下，将 .desc 的 top 值更改为 99% 似乎可行。（这意味着它不会闪烁或在悬停时保持隐藏状态）

.container {
  column-count: 3;
  column-gap: 0;
position: relative;

}

.item {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  position: relative;
}


.image {
  width: 100%;
}

.image img {
  display: block;
  width: 100%;
}

.desc {
  top: 99%; /* change this to 99% from 100% */
  height: auto;
  transition: transform 0.2s ease-out;
  position: absolute;
  left: 0;
  color:#ccc;
  background: #353b49;
  padding: 10px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  line-height: normal;
  z-index: 10;
}

.item:hover .desc {
  transform: translateY(-99%);
  left: 0;
}

<div class="container">

  <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
   <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
   <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
   <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
   <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
   <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>

</div>

PS。我不知道为什么它不能在 .desc.

上使用 top: 100%

编辑：

我会使用 bottom 属性的方式如下 -

.container {
  column-count: 3;
  column-gap: 0;
position: relative;

}

.item {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  position: relative;
}


.image {
  width: 100%;
}

.image img {
  display: block;
  width: 100%;
}

.desc {
  bottom: -100%;
  max-height: 100%;
  transition: 0.2s ease-out;
  position: absolute;
  overflow-y: scroll;
  left: 0;
  color:#ccc;
  background: #353b49;
  padding: 10px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  line-height: normal;
  z-index: 10;
}
.desc::-webkit-scrollbar {
  display: none;
}

.item:hover .desc {
  bottom: 0;
}

<div class="container">

  <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
   <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
   <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
   <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
   <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  
   <div class="item">
    <div class="image"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" /></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>

</div>

你可以看到有一个 child 的长文本溢出了 parent，这使得特定的 .desc 从底部偷看parent.

所以我在 .desc 中添加了 max-height: 100%，这样它就不会溢出它的 parent，然后我还添加了 overflow-y: scroll 到 .desc 这样您仍然可以在 .desc 中滚动以查看完整内容。

CSS 列计数和 css 转换

CSS column count and css transform

html

css

css-transforms

css-multicolumn-layout