A CodePen by joffrey. Chromatic Hover with Pseudo-Elements Animations & Transitions - This is a fork of Marco Barría's experiment. We use Pseudo-Elements Animations & Transitions on :before and :after to do that. Arrangement for HAML and SASS by Joottle. 1st modification : add a call to hover text. You can see the original demonstration here : h…

index.haml

.circle
  %h1
    Hi !
  %h2
    Hover me !

script.js

/*

This is a fork of Marco Barría's experiment. We use Pseudo-Elements Animations & Transitions on :before and :after to do that.

Arrangement for HAML and SASS by Joottle.

1st modification : add a call to hover text.

You can see the original demonstration here : http://tympanus.net/Development/PseudoElementsAnimationsTransitions/index2.html.

*/

style.sass

@import "compass"
.circle
  background: rgb(255,255,255)
  border-radius: 100%
  cursor: pointer
  position: relative
  margin: 0 auto
  width: 15em
  height: 15em
  overflow: hidden
  transform: translateZ(0)
  margin-top: 3em
  
  h1, h2
    font-family: 'Lato', sans-serif
    font-weight: 900
    font-size: 1.6em
    line-height: 8.2em
    text-align: center
    text-transform: uppercase
    -webkit-font-smoothing: antialiased
    user-select: none
  
  h1
    color: rgba(189, 185, 199,0)
    transition: color 2.1s ease-in-out
  
  h2
    position: absolute
    top: -0.2em
    left: 1.4em
    color: rgba(255, 255, 255, 1)
    transition: color 1.5s ease-in-out
      
    
  &:before, &:after
    border-radius: 100%
    content: ""
    position: absolute
    top: 0
    left: 0
    width: inherit
    height: inherit
    box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 10.6em 0 rgba(30, 140, 209, 0.2), inset -10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 -10.6em 0 rgba(30, 140, 209, 0.2)
    user-select: none
    transition: box-shadow 2s
    
  &:after
    transform: rotate(45deg)
    
  &:hover:before, &:hover:after
    box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.86em 0 rgba(252, 150, 0, 0.5), inset -0.86em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.86em 0 rgba(0, 150, 255, 0.5)
    
  &:hover > h1
    color: rgba(185, 185, 185,1)
    
  &:hover > h2
    color: rgba(255, 255, 255,0)
    transition: color 0.5s ease-in-out