How can I display a list of categories with fade effect Up?

Question

I have this sample:

CODE HTML:

<div class="show">show div</div>
<ul class="list-categories">
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
</ul>

CODE CSS:

.show:hover .list-categories{
  overflow: auto;
  max-height: inherit;
}
.list-categories{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  max-height: 0px;
  overflow: hidden;
}

I want to achieve that when you hover your cursor over "show div", a list of categories displays using the effect 'fadeUp'.

How can I do this while only using CSS? !

score 0 · Answer 1 · answered Jan 20 '17 at 14:39

I have updated Your codepen, please have a look.

You have to select the element's sibling that You want to fade in like so:

.show:hover + .list-categories {code}

And after that, You should add the desired animated effects using CSS transitions.

If this is an important part of Your project, I suggest that You use some javascript(or use jQuery) to add a class dynamically, instead of using the CSS approach. Just a tip.

score 0 · Answer 2 · answered Jan 20 '17 at 14:39

The main problem in the code is the :hover selector. There are two ways to fix this.

Use the selector .show:hover + .list-categories, and have the markup you have now.Or,
Change your markup to have the <ul> inside <div class="show">, and use .show:hover .list-categories.

The fadeUp can then be easily added using CSS transitions:

.show:hover + .list-categories {
  overflow: auto;
  max-height: 200px;
  opacity: 100;
}

.list-categories {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
}

score 0 · Answer 3 · answered Jan 20 '17 at 14:44

Here is another way to do it.

Live Demo: https://codepen.io/anon/pen/VPpdGY

.show:hover + .list-categories{
  max-height: inherit;
  opacity: 1;

}

.list-categories{
  list-style-type: none;
  padding: 0px;
  margin: 0px;

  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: opacity 300ms ease;
}

rajesh · Answer 4 · 2017-01-20T14:55:04.050

I just made changes with your html:

Problem is you seperate the ul and div that's cause the problem here.

check out it will work for you:

HTML:

<ul class="show"><li>show div
<ul class="list-categories">
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
</ul>
</li>
</ul>

CSS:

.show:hover .list-categories{
  overflow: auto;
  max-height: inherit;
}
.list-categories{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  max-height: 0px;
  overflow: hidden;
}

FIDDLE

Alternative solution:

HTML:

<div class="show">show div
<ul class="list-categories">
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
</ul>  </div>

https://codepen.io/rajesh26/pen/EZWROM

score 0 · Answer 5 · edited May 23 '17 at 12:16

First of all, you need to target the 'list-categories' class when you are hovering or else your styles won't get applied. You do that via the sibling selector +:

.show:hover + .list-categories {
  ...

To achieve the fade up effect, you have to take into consideration that you cannot transition from or to an auto height. The goto method for this problem would be to set your max-height after you've hovered to a value which will (probably) never be reached - something like 1000px:

.show:hover + .list-categories {
  overflow: auto;
  max-height: 1000px;
}

If you want more information on this, I would suggest you read this post.

Finally for the animation to work, you will have to specify, how the transition should be executed:

.list-categories {
  ...
  transition: all 0.5s ease;
}

I have updated your codepen with the recommended additions, which you can view here.

Abhishek Agarwalla · Answer 6 · 2017-01-20T15:19:22.390

there is a lot more effect that you can add up then just fade-up effect.

Just Download Animate.Css and copy into Your Project Folder.

Add these file inside your index.html or any html page that you want effect.

Then you can add any effect that you love to do, for example:

<ul class="show">
  <li>show div
    <ul class="animated fadeInUp list-categories">
      <li>Bed</li>
      <li>Bed</li>
      <li>Bed</li>
      <li>Bed</li>
      <li>Bed</li>
      <li>Bed</li>
    </ul>
  </li>
</ul>

But if you want to add this effect on ':hover' than you need to you use jquery, actually it is simple, here is a video tutorial on how to do that:

How to Add Animation Effect Dynamically

How can I display a list of categories with fade effect Up?

6 Answers6