Hover-effect for text/links. Takiri

Source: ruseller.com
[html]
<div class="demo"><a class="link link--takiri" href="http://forumd.ru">ForumD.ru <span>Design for forums and technical support</span></a></div>
<style>
.demo {background-color: #DDD;
       height: 350px;}
.link {
outline: none;
text-decoration: none;
position: relative;
font-size: 8em;
        top: 25%;
        left: 25%;
line-height: 1;
color: #9e9ba4;
display: inline-block;
}
/* Takiri */
.link--takiri {
font-style: italic;
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 7em;
padding: 0 10px 20px;
-webkit-transition: color 0.5s;
transition: color 0.5s;
}

.link--takiri:hover {
color: #1e1a1b;
        z-index: 1;
}

.link--takiri::before {
content: '';
position: absolute;
height: 36px;
width: 60%;
top: 50%;
margin-top: -18px;
left: 20%;
z-index: -1;
background: #F9F9F9;
-webkit-transform: rotate3d(0,0,1,45deg) scale3d(0,1,1);
transform: rotate3d(0,0,1,45deg) scale3d(0,1,1);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}

.link--takiri:hover::before {
-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
}

.link--takiri span {
font-size: 20%;
font-weight: 400;
position: absolute;
right: 15px;
color: #e53369;
bottom: 0;
opacity: 0;
        z-index: 2;
-webkit-transform: translate3d(-10px,-10px,0);
transform: translate3d(-10px,-10px,0);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}

.link--takiri:hover span {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
</style>[/html]

Installing
1. Put this HTML-code to the place you need:

Code:
<div class="demo"><a class="link link--takiri" href="http://forumd.ru">ForumD.ru <span>Дизайн для форумов и техническая поддержка</span></a></div>

Perhaps you don't need a div with a demo class, if no additional background is needed.
2. Put this CSS-code to styling windows (Admin → Custom style), or to HTML (using tags <style></style>): 

Code:
.demo {background-color: #DDD;
       height: 350px;}
.link {
	outline: none;
	text-decoration: none;
	position: relative;
	font-size: 8em;
        top: 25%;
        left: 25%;
	line-height: 1;
	color: #9e9ba4;
	display: inline-block;
}
/* Takiri */
.link--takiri {
	font-style: italic;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 7em;
	padding: 0 10px 20px;
	-webkit-transition: color 0.5s;
	transition: color 0.5s;
}

.link--takiri:hover {
	color: #1e1a1b;
        z-index: 1;
}

.link--takiri::before {
	content: '';
	position: absolute;
	height: 36px;
	width: 60%;
	top: 50%;
	margin-top: -18px;
	left: 20%;
	z-index: -1;
	background: #F9F9F9;
	-webkit-transform: rotate3d(0,0,1,45deg) scale3d(0,1,1);
	transform: rotate3d(0,0,1,45deg) scale3d(0,1,1);
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.link--takiri:hover::before {
	-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
	transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
}

.link--takiri span {
	font-size: 20%;
	font-weight: 400;
	position: absolute;
	right: 15px;
	color: #e53369;
	bottom: 0;
	opacity: 0;
        z-index: 2;
	-webkit-transform: translate3d(-10px,-10px,0);
	transform: translate3d(-10px,-10px,0);
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
}

.link--takiri:hover span {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,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.