A Pen by Fabrice Weinberg.

Direction-aware-hover-pure-CSS.markdown

Direction aware hover pure CSS

Just a little experiment with pseudo elements. Semantic HTML is maintained. No boilerplate elements.

Blog post

A Pen by Fabrice Weinberg on CodePen.

License.

index.html

<h1>Direction aware hover pure CSS</h1>

  <div class="box">
    <div class="box__right">Right → Left</div>
    <div class="box__left">Left → Right</div>
    <div class="box__top">Top → Bottom</div>
    <div class="box__bottom">Bottom → Top</div>
    <div class="box__center">
      Hover from any side  
    </div>
  </div>

<footer>Created by <a href="http://twitter.com/FWeinb" target="_blank">Fabrice Weinberg</a></footer>

style.scss

@import "compass";
.box{
  margin: 5em auto;
  
  position:relative;
  width:10em;
  height:10em;
  
  line-height:10em;
  
  overflow:hidden;
}

%box__dir{
  position:absolute;
  width:inherit;
  height:inherit;
  
  text-align:center;
  line-height:inherit;
  
  transition:transform .4s ease;
  
  &:before{
    position:absolute;
      
    content:'';
     /*
      * Calculation:
      *      ____a____
      *    /|\        |
      *   b | \       |
      *  /  a  \      |
      *  \  |  /      |
      *   \ | /       |
      *    \|/________|
      *
      *  a^2 = b^2+b^2
      *
      *  solve to b:
      *
      *  a^2         = 2b^2 | /2  
      *  a^2 / 2     =  b^2 | sqrt
      *  a / sqrt(2) =  b
      *
      * Percentage: 
      * a = 100%
      * 100 / sqrt(2) = 70.71%
      *                 ------
      */
    width:70.71%;
    height:70.71%;
    transform: rotate(45deg);
  }  
  
  &:hover{
    transform:translateX(0);
    z-index:1;
  }
    
  &:hover:before{
    width:100%;
    height:100%;
    transform: none;  
  }  
}

.box__right{
   @extend %box__dir;
   background:blue;
   transform:translateX(100%);
  
   &:before{   
      right:100%;bottom:0;
      transform-origin: 100% 100%;
   }
   
   &:hover ~ .box__center{
     transform:translateX(-100%);   
   }
} 

.box__left{
   @extend %box__dir;
   background:green;
   transform:translateX(-100%);
  
   &:before{   
      left:100%;
      transform-origin: 0 0;  
   }   
    
   &:hover ~ .box__center{
     transform:translateX(100%);   
   }
}

.box__top{
   @extend %box__dir;
   background:red;
   transform:translateY(-100%);
  
   &:before{   
      top:100%;right:0;
      transform-origin:100% 0; 
   }
    
   &:hover ~ .box__center{
     transform:translateY(100%);   
   }
}


.box__bottom{
   @extend %box__dir;
   background:yellow;
   transform:translateY(100%);
  
   &:before{   
      bottom:100%;left:0;
      transform-origin:0 100%;
   }
    
   &:hover ~ .box__center{
     transform:translateY(-100%);   
   }
}

.box__center{
   @extend %box__dir;
   background:orange;
   z-index:-1;
}

/* Some booring css*/
html,
body{
  height:100%;
}

body{  
  font-family:Helvetica, sans-serif;
  transform:translateZ(0);
}

h1{
  text-align:center;
}

footer{
  text-align:center;
  font-size:8pt;
  color:gray;
}

a{
  color:#FF6600;  
}

a:hover{
  color:darkorange;
}