0

I want the contents of the dropdown to fade in over 0.3 seconds when hovered over using the transition property. I have it working when hovering over tabs.

li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  display: block;
}
<li class="dropdown">
  <a href="#" class="dropbtn">Dropdown</a>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</li>
misterManSam
  • 24,303
  • 11
  • 69
  • 89
fraser dale
  • 1,187
  • 1
  • 9
  • 18
  • Possible duplicate of [How can I transition height: 0; to height: auto; using CSS?](http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css) – henry Sep 05 '16 at 22:43
  • Check out the answers to http://stackoverflow.com/a/8331169/1241736 I recommend using `max-height: 0; overflow: hidden` and then on `:hover` using a `max-height` bigger than you'll ever need. – henry Sep 05 '16 at 22:44

2 Answers2

3

Try this, First make opacity:0 to your dropdown item and use transition and when you are going to hover on the block then that opacity:0 block should be opacity:1

li.dropdown {
  display: inline-block;
}
.dropdown-content {
  opacity: 0;
  transition: opacity .3s ease-in-out;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
    opacity: 1;
}
<li class="dropdown">
  <a href="#" class="dropbtn">Dropdown</a>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</li>
Mukunda Bhatta
  • 581
  • 3
  • 14
0

How about using CSS property transform for this?

The trick would be to scale down to 0 your dropdown content, then back to normal on hover.

.dropdown-content {
      transform: scale(0);
}

.dropdown:hover .dropdown-content {
      transform: scale(1);
}

You can change transform-origin value if you want a different starting point.

jsFiddle

li.dropdown {
  display: inline-block;
}
.dropdown-content {
  transform: scale(0);
  transform-origin: 15% 0;
  transition: transform 300ms ease-out;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  transform: scale(1);
}
<li class="dropdown">
  <a href="#" class="dropbtn">Dropdown</a>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</li>
Ricky Ruiz
  • 25,455
  • 6
  • 44
  • 53
  • what does changing the transition-origin actually do? been playing aroudn with it and cant see anything, thanks – fraser dale Sep 06 '16 at 13:11
  • Here's a [**demo**](https://jsfiddle.net/rickyruizm/6ugL0w54/) changing `transform-origin` between dropdowns. You can find more info [**here**](http://tympanus.net/codrops/css_reference/transform-origin/). Basically, like its name suggests, it lets you change the point/origin from which the transformation or transformations begin. – Ricky Ruiz Sep 06 '16 at 16:02