pure CSS show / hide

markup

    <div id="container" class="outline outline-big toggle-on-hover-switch">
      <b>.toggle-on-hover-switch</b>
      <div id="out" class="outline toggle-on-hover-hide">
        <b>.toggle-on-hover-hide</b><br/>
        I disappear.
        I disappear.
        I disappear.
        I disappear.
      </div>
      <div id="in" class="outline toggle-on-hover-show">
        <b>.toggle-on-hover-show</b><br/>
        I appear.
        I appear.
        I appear.
        I appear.
      </div>
    </div>

switcher

.toggle-on-hover-visible
  visibility: visible
  opacity:    1
  max-height: 9999px

.toggle-on-hover-invisible
  visibility: hidden
  opacity:    0
  max-height: 0

.toggle-on-hover-switch
  .toggle-on-hover-show
    @extend .toggle-on-hover-invisible
    +transition(visibility 0s $transtime, opacity $transtime, max-height 0s $transtime)
  .toggle-on-hover-hide
    @extend .toggle-on-hover-visible
    +transition(visibility 0s linear 0s, opacity $transtime, max-height 0s linear 0s)
  &:hover
    & .toggle-on-hover-show
      @extend .toggle-on-hover-visible
      +transition(visibility 0s linear 0s, opacity $transtime, max-height 0s linear 0s)
    & .toggle-on-hover-hide
      @extend .toggle-on-hover-invisible
      +transition(visibility 0s $transtime, opacity $transtime, max-height 0s $transtime)