Add "Hide Children on Hover"

[Mecrano]

At some point we need to hide children when the parent is in a hover state, for example:
we have 2 image one over one, and when user hover it, we need show second image, hide first child

[Mecrano]

line 1864:

/*
 
   Hide the child when parent is mouse hover state:
 
   Put the hide-child-on-hover class on a parent element and any nested element with the
   child class will be hidden on hover or focus.
 
   <div class="hide-child-on-hover">
     <div class="child"> Hidden until hover or focus </div>
     <div class="child"> Hidden until hover or focus </div>
     <div class="child"> Hidden until hover or focus </div>
     <div class="child"> Hidden until hover or focus </div>
   </div>
 */
 .hide-child-on-hover .child { opacity: 1; transition: opacity .15s ease-in; }
 .hide-child-on-hover:hover  .child, .hide-child-on-hover:focus  .child, .hide-child-on-hover:active .child { opacity: 0; transition: opacity .15s ease-in; }