is-observable state

_state.scss

/*= @group State
---------------------------------------------------------------------- */

.is-hidden {
  display: none;
}
.is-hidden--floated {
  position: absolute;
  visibility: hidden;
  @include opacity(0);
  @include transition(opacity .3s ease-in-out);
}

/**
 * is-observable state
 * e.g.:
 *
   <div class="is-observable">
      <button class="is-hidden--floatead">I'll be revealed on hover</button>
      <button class="is-hidden">Me too, but I occupy space</button>
   </div>
 *
 */
.is-observable:hover {
    .is-hidden {
      display: block;  
    }
    .is-hidden--floated {
      visibility: visible;
      @include opacity(0);
    }
}