April 3, 2015

CSS3 text hover effect

CSS3 text hover effect

Just an experiment on text hover effects. The text effect is done by skew and rotate properties in CSS3. This is a full width page and responsive on all devices.

HTML

<div class="text-hover page1">
   <div class="effect1" data-hover="HOVER ME">
      HOVER ME
   </div>
</div>
<div class="text-hover page2">
   <div class="effect2" data-hover="HOVER ME">
      HOVER ME
   </div>
</div>
<div class="text-hover page3">
   <div class="effect3" data-hover="HOVER ME">
      HOVER ME
   </div>
</div>
<div class="text-hover page4">
   <div class="effect4" data-hover="HOVER ME">
      HOVER ME
   </div>
</div>
<div class="text-hover page5">
   <div class="effect5" data-hover="HOVER ME">
      HOVER ME
   </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,800,400&subset=latin,latin-ext);

body{
   font-family:"Open Sans";
   font-weight: 400;
}
html,body{
   height: 100%;
}

/* Effect1 */
.effect1{
   position: relative;
   transition:600ms;
}
.effect1:after{
   content: attr(data-hover);
   position: absolute;
   left: 0;
   bottom: 0;
   transform:rotateX(90deg);
   -webkit-transform:rotateX(90deg);
   -moz-transform:rotateX(90deg);
   -o-transform:rotateX(90deg);
   -ms-transform:rotateX(90deg);
   transition:300ms;
   opacity: 0;
   color: #0169af;
   height: 0;
}
.effect1:hover:after{
   transform:rotateX(0deg);
   -webkit-transform:rotateX(0deg);
   -moz-transform:rotateX(0deg);
   -o-transform:rotateX(0deg);
   -ms-transform:rotateX(0deg);
   top: 0;
   opacity: 1;
   height: 100%;
}
.effect1:hover{
   color: transparent !important;
}

/* Effect2 */
.effect2{
   position: relative;
   transition:600ms;
}
.effect2:after{
   content: attr(data-hover);
   position: absolute;
   left: -100%;
   top: 0;
   transform:rotateY(90deg);
   -webkit-transform:rotateY(90deg);
   -moz-transform:rotateY(90deg);
   -o-transform:rotateY(90deg);
   -ms-transform:rotateY(90deg);
   transition:300ms;
   opacity: 0;
   color: #038d72;
}
.effect2:hover:after{
   transform:rotateY(0deg);
   -webkit-transform:rotateY(0deg);
   -moz-transform:rotateY(0deg);
   -o-transform:rotateY(0deg);
   -ms-transform:rotateY(0deg);
   opacity: 1;
   left: 0;
}
.effect2:hover{
   color: transparent !important;
}

/* Effect3 */
.effect3{
   position: relative;
   transition:600ms;
}
.effect3:after{
   content: attr(data-hover);
   position: absolute;
   right: -100%;
   top: 0;
   transform:skewX(-45deg);
   -webkit-transform:skewX(-45deg);
   -moz-transform:skewX(-45deg);
   -o-transform:skewX(-45deg);
   -ms-transform:skewX(-45deg);
   transition:300ms;
   opacity: 0;
   color: #a01001;
}
.effect3:hover:after{
   transform:skewX(0deg);
   -webkit-transform:skewX(0deg);
   -moz-transform:skewX(0deg);
   -o-transform:skewX(0deg);
   -ms-transform:skewX(0deg);
   opacity: 1;
   right: 0;
}
.effect3:hover{
   color: transparent !important;
}

/* Effect4 */
.effect4{
   position: relative;
   transition:600ms;
}
.effect4:after{
   content: attr(data-hover);
   position: absolute;
   left: -20%;
   top: 0;
   opacity: 0;
   transform:skewX(20deg);
   -webkit-transform:skewX(20deg);
   -moz-transform:skewX(20deg);
   -o-transform:skewX(20deg);
   -ms-transform:skewX(20deg);
   transition:300ms;
   color: #142b43;
   letter-spacing: -100px;
}
.effect4:hover:after{
   transform:skewX(0deg);
   -webkit-transform:skewX(0deg);
   -moz-transform:skewX(0deg);
   -o-transform:skewX(0deg);
   -ms-transform:skewX(0deg);
   opacity: 1;
   left: 0;
   letter-spacing: 0px;
}
.effect4:hover{
   color: transparent !important;
}

/* Effect5 */
.effect5{
   position: relative;
   transition:600ms;
}
.effect5:after{
   content: attr(data-hover);
   position: absolute;
   left: 0;
   top: 0;
   opacity: 0;
   transition:300ms;
   color: #008639;
   letter-spacing: -25px;
   width: 100%;
   text-align: center;
}
.effect5:hover:after{
   letter-spacing: 0px;
   opacity: 1;
}
.effect5:hover{
   color: transparent !important;
}

/* front */
.text-hover{
   width: 100%;
   height: 100%;
  display: table;
   cursor: default;
   position: relative;
   overflow: hidden;
   perspective:1000px;
   -webkit-perspective:1000px;
   -moz-perspective:1000px;
   display: -webkit-box;
   display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -moz-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -moz-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    text-align: center;
}

/* page */
.page1, .page2, .page3, .page4, .page5 {
   color: #fff;
   font-weight: 800;
   font-size: 40px;
   text-shadow:1px 2px 3px rgba(0,0,0,0.2);
}
.page1{
   background: rgba(52, 152, 219,1.0);
}
.page2{
   background: rgba(26, 188, 156,1.0);
}
.page3{
   background: rgba(231, 76, 60,1.0);
}
.page4{
   background: rgba(52, 73, 94,1.0);
}
.page5{
   background: rgba(46, 204, 113,1.0);
}
demo

No comments:

Post a Comment

Popular Posts

Views