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

Источник: ruseller.com
[html]
<div class="demo"><a class="link link--kumya" href="https://forumd.ru"><span data-letters="ForumD.ru">ForumD.ru</span></div>
<style>
.demo {background-color: #333;
       height: 350px;}
.link {
outline: none;
text-decoration: none;
position: relative;
        top:25%;
        left: 20%;
font-size: 8em;
line-height: 1;
color: #9e9ba4;
display: inline-block;
        text-align: center;
}
/* Kumya */
.link--kumya {
font-family: 'Syncopate', sans-serif;
font-size: 6.5em;
overflow: hidden;
padding: 10px 10px 0;
line-height: 1;
color: #242424;
}

.link--kumya:hover {
color: #242424;
}

.link--kumya::after {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
z-index: 0;
background: #242424;
-webkit-transform: translate3d(101%,0,0);
transform: translate3d(101%,0,0);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.link--kumya:hover::after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

.link--kumya span {
display: block;
position: relative;
}

.link--kumya span::before {
content: attr(data-letters);
position: absolute;
color: #fff;
left: 0;
overflow: hidden;
white-space: nowrap;
width: 0%;
z-index: 2;
-webkit-transition: width 0.5s;
transition: width 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.link--kumya:hover span::before {
width: 100%;
}
</style>[/html]

установка

1. HTML код устанавливаем в нужном месте

<a class="link link--kumya" href="https://forumd.ru"><span data-letters="ForumD.ru">ForumD.ru</span>

2. CSS код, устанавливается в стиль css, или вместе html (предварительно обернув тегами <style></style>)

.link {
	outline: none;
	text-decoration: none;
	position: relative;
	font-size: 8em;
	line-height: 1;
	color: #9e9ba4;
	display: inline-block;
        text-align: center;
}
/* Kumya */
.link--kumya {
	font-family: 'Syncopate', sans-serif;
	font-size: 6.5em;
	overflow: hidden;
	padding: 10px 10px 0;
	line-height: 1;
	color: #242424;
}

.link--kumya:hover {
	color: #242424;
}

.link--kumya::after {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	right: 0;
	z-index: 0;
	background: #242424;
	-webkit-transform: translate3d(101%,0,0);
	transform: translate3d(101%,0,0);
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.link--kumya:hover::after {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.link--kumya span {
	display: block;
	position: relative;
}

.link--kumya span::before {
	content: attr(data-letters);
	position: absolute;
	color: #fff;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	width: 0%;
z-index: 2;
	-webkit-transition: width 0.5s;
	transition: width 0.5s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.link--kumya:hover span::before {
	width: 100%;
}

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