Hover эффект текста/ссылок. Ilin

Источник: ruseller.com
[html]
<div class="demo"><a class="tilin link--ilin" href="http://forumd.ru"><span>Forum</span><span>D.ru</span></a></div>
<style>
.demo {background-color: #ddd; height: 250px;}
.tilin {
outline: none;
text-decoration: none;
position: relative;
        top: 25%;
        left: 20%;
font-size: 8em;
line-height: 1;
color: #9e9ba4;
display: inline-block;
}
/* Ilin */
.link--ilin {
font-weight: 900;
text-transform: uppercase;
line-height: 0.8;
overflow: hidden;
color: #adaa88;
}

.link--ilin span {
position: relative;
display: inline-block;
-webkit-transition: color 0.5s;
transition: color 0.5s;
}

.link--ilin:hover span:first-of-type {
color: #fff;
}

.link--ilin:hover span:last-of-type {
color: #1e1a1b;
}

.link--ilin span::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #fff;
line-height: 0.8;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}

.link--ilin span:last-of-type::before {
background: #1e1a1b;
}

.link--ilin:hover span:last-of-type::before,
.link--ilin span:first-of-type::before {
-webkit-transform: translate3d(0,-150%,0);
transform: translate3d(0,-150%,0);
}

.link--ilin:hover span:first-of-type::before,
.link--ilin span:last-of-type::before {
-webkit-transform: translate3d(0,150%,0);
transform: translate3d(0,150%,0);
}
</style>
[/html]

установка

1. HTML

вебадрес
ваш текст, первый - белый, второй - черный
2. CSS-код, располагается в окне стилей, либо в html (обернутый в теги <style></style>

Возникшие у вас вопросы по установке данного эффекта или стилизации текста для него, можно задать в этой теме.
Надеюсь эффект вам понравился.