hover effect(CSS3)
----HTML----
<div class="effect">
<a data-hover="Endress" href="#">Endress</a>
<a data-hover="Summer" href="#">Summer</a>
</div>
----CSS----
.effect a:before {
color: #eee;
content: attr(data-hover);
opacity: 0;
pointer-events: none;
position: absolute;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
transform: scale(1.1) translateX(50px) translateY(-50px) rotate(20deg);
transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
}
.effect a:hover:before, .effect a:focus:before {
opacity: 1;
transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
}
pre
manakaa.com