CSS column count and css transform

Question

I am using column count and I have div above which holds a text that animates from bottom on hover. The problem it doesnt behave as it should on all items.

.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

I would have approached this differently. As @TemaniAfif already mentioned, using bottom value instead of top would be much easier.

In your case, however, changing the top value of .desc to 99% seems to work. (which means it's not flickering or stay hidden on hover)

.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. I have no idea why it isn't working with top: 100% on .desc.

Edit:

The way I would have used bottom property is as below -

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

You can see that there is one child with a long text which overflows the parent, which makes that particular .desc to peek from bottom of the parent.

So I have added max-height: 100% to the .desc so that it never overflows its parent, and then I have also added overflow-y: scroll to .desc so you can still scroll inside .desc to see the full content.