Element fade in and out with pure css

fadeInOut.css

/*
  This will show/hide element with fade transition. Hidden element won't overlap any other.
*/
.fade-in-out {
  height: 0;
  opacity: 0;
  transition: opacity 300ms, height 10ms 300ms; /* delay height transition until opacity is done */
  
  &.hover{
    height: 100%;
    opacity: 1;
    transition: opacity 300ms;
  }
}