Hover-effect for text/links. Ilin
Source: 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]
Installing
1. HTML

<a class="tilin link--ilin" href="http://forumd.ru"><span>Forum</span><span>D.ru</span></a>

web address
your text, 1st - white, 2nd - black
2. CSS-code, can be placed to custom styling windows (Admin → Custom style) or to HTML (Admin → Options) (using tags <style></style>)

Code:
.tilin {
	outline: none;
	text-decoration: none;
	position: relative;
	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);
}

If you have any questions about installing this effect or styling the text, you can ask them in this topic.
Hope you enjoyed this effect.