Hover effect

by stackmanoz

HTML

<div id="D">
 <span id="S">c</span><span  id="S">s</span><span  id="S">s</span><span  id="S">H</span><span  id="S" >()</span><span  id="S">V</span><span  id="S">E</span><span  id="S">R</span>
</div>

CSS

#D {
  background: #fff;
  height: 180px;
  position: justify;
border:1px dotted #ccc;

}
 
#S{
  font: 5em 'Bree Serif', Helvetica, sans-serif;
  margin: 50px;
  opacity: 0;
  text-transform: uppercase;
  position:absolute;
}
#S:nth-child(5) {
  -webkit-transition: all 2s ease-in-out ;
     -moz-transition: all 2s ease-in-out ;
       -o-transition: all 2s ease-in-out ;
      -ms-transition: all 2s ease-in-out ;
          transition: all 2s ease-in-out ;

}
 
#S:nth-child(4) {
  -webkit-transition: all 1s ease ;
     -moz-transition: all 1s ease ;
       -o-transition: all 1s ease ;
      -ms-transition: all 1s ease ;
          transition: all 1s ease ;
}
 
#S:nth-child(3) {
  -webkit-transition: all 2s ease ;
     -moz-transition: all 0.1s ease 0s ;
       -o-transition: all 0.1s ease ;
      -ms-transition: all 0.1s ease ;
          transition: all 1s ease  0s;
}
 
#S:nth-child(2) {
  -webkit-transition: all 1s ease ;
     -moz-transition: all 0.1s ease ;
       -o-transition: all 0.1s ease ;
      -ms-transition: all 0.1s ease ;
          transition: all 1s ease ;
}
 
#S:nth-child(1) {
  -webkit-transition: all 1s ease;
     -moz-transition: all 0.5s ease 0s;
       -o-transition: all 0.1s ease;
      -ms-transition: all 0.1s ease;
          transition: all 1s ease 0s;
}
#D:hover #S:nth-child(1) {
  opacity: 1;
  left: 50px;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
color:#ccc;
    text-shadow: 1px 4px 6px black;


}
#D:hover #S:nth-child(2) {
  opacity: 1;
  -webkit-transform: rotate(-360deg);
     -moz-transform: rotate(-360deg);
       -o-transform: rotate(-360deg);
      -ms-transform: rotate(-360deg);
          transform: rotate(-360deg);
}
#D:hover #S:nth-child(3) {
  opacity: 1;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform:...