Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created January 9, 2017 04:27
Show Gist options
  • Save CodeMyUI/e9f84b6f316a6d4da39dcdc8ff88e4f3 to your computer and use it in GitHub Desktop.
Save CodeMyUI/e9f84b6f316a6d4da39dcdc8ff88e4f3 to your computer and use it in GitHub Desktop.
Text hover effect
<div>
<a class="buzz" href="#">Buzz</a>
</div>
$( document ).ready( function()
{
$( '.buzz' ).each( function()
{
$( this ).attr( 'data-buzz' , $( this ).text() );
} );
} );
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
html { width:100%; height:100%; }
body
{
display:table;
width:100%; height:100%;
margin:0;
background:#e6e6e6;
color:#3d3d3d;
font-weight:bold;
font-size:4em;
}
div
{
display:table-cell;
text-align:center;
vertical-align:middle;
}
.buzz
{
display:inline-block;
position:relative;
color:inherit;
text-decoration:none;
transition:all 250ms ease;
transform:translatez(0);
perspective:50px;
}
.buzz:before,
.buzz:after
{
content:attr( data-buzz );
position:absolute;
z-index:-1;
opacity:0.5;
transition:all 150ms ease;
}
.buzz:before
{
color:#00d5ff;
top:2px; left:2px;
}
.buzz:after
{
color:#ffaa00;
bottom:2px; right:2px;
}
.buzz:hover:before
{
transform:rotatex(-15deg) rotatey(5deg) scale(1.25);
}
.buzz:hover:after
{
transform:rotatey(-5deg) rotatex(15deg) scale(1.25);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment