0

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>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Toniq
  • 4,492
  • 12
  • 50
  • 109
  • 1
    Where is your question? what is the issue? what doesnt work as expected? So far I only know: `The problem it doesnt behave as it should on all items.` and I got no idea what that is suppose to mean. Add Clarity and details to your question. – tacoshy Apr 09 '21 at 10:29
  • 1
    @tacoshy test the code on chrome and you will understand – Temani Afif Apr 09 '21 at 10:35
  • @TemaniAfif if the issue is chrome specific then this should be added to the question. with FF I see no issue at all. Also it should clarify the issue in general. Users that not use Chrome by default will not know what the question is about. – tacoshy Apr 09 '21 at 10:37
  • 1
    @tacoshy maybe the OP is not aware that there is no issue on FF. Like you didn't notice that there is an issue on chrome ;) – Temani Afif Apr 09 '21 at 10:41
  • Please do not edit answers into questions. Post them as answers instead. I've voted to close this as unclear because you have said it "isn't working" but haven't explained how it should be working and how your current code differs from that. – TylerH Apr 12 '21 at 14:03

2 Answers2

2

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.

Debsmita Paul
  • 1,442
  • 9
  • 22
  • 1
    How would this look with bottom? Top 99% is not good becuase if you look it in full page you can see little bit of desc sticking out of the bottom. – Toniq Apr 09 '21 at 13:59
  • Yes there is a little part visible. You can try using `opacity` value to make it visible/invisible on hover and hover out. Or, you can use `bottom` property instead of `top`. 1. Remove `top` and `transform` property from .desc, 2. Add `bottom: -100%` to .desc, 3. Add `bottom:0` to .desc on hover state, 4. Remove **transform** fron `transition` in .desc. it should work, if not then I'll add a code snippet tomorrow. – Debsmita Paul Apr 09 '21 at 14:41
  • 1
    Using bottom was not good, if more text was available, then text would become visible from the bottom. I fixed this with -webkit-backface-visibility:hidden; on desc – Toniq Apr 11 '21 at 15:26
  • @Toniq Oh yes it does that, I have just added a code snippet on how to handle that situation. There are of course multiple ways you can achieve that, including the way you have handled it. – Debsmita Paul Apr 12 '21 at 13:49
1

Instead of top:100% use bottom:0 and also invert the transformation. It seems to work better.

.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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415