Hover-эффекты превращений для текста с помощью CSS

Примеры создания hover-эффектов для текста. Все превращения созданы с помощью CSS свойств text-shadow или box-shadow.

HTML

<h2 id="zoom-fade">Постепенное исчезновение</h2>
<h2 id="glow">Свечение</h2>
<h2 id="slide-up">Скольжение вверх</h2>
<h2 id="slide-right">Скольжение вправо</h2>
<h2 id="diag-topLeft">Диагонально сверху-влево</h2>
<h2 id="flood-right">Заливание вправо</h2>

CSS

* {
 font-family: helvetica neue, helvetica, arial, sans-serif;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
 user-select: none;
}

h1, h2, p {
 text-align: center;
 display: block;
 width: 500px;
 margin: 50px auto;
}
@media all and (max-width: 500px) {
 h1, h2, p {
 width: 100%;
 }
}

h1 {
 font-weight: 200;
}

h2 {
 cursor: pointer;
 font-weight: 900;
}

p {
 font-weight: 200;
}

#zoom-fade {
 -webkit-transition: 0.5s ease-in-out;
 -moz-transition: 0.5s ease-in-out;
 -ms-transition: 0.5s ease-in-out;
 -o-transition: 0.5s ease-in-out;
 transition: 0.5s ease-in-out;
 -webkit-text-shadow: 0 0 50px transparent;
 -moz-text-shadow: 0 0 50px transparent;
 -ms-text-shadow: 0 0 50px transparent;
 -o-text-shadow: 0 0 50px transparent;
 text-shadow: 0 0 50px transparent;
 color: rgba(0, 0, 0, 0.1);
 overflow: visible;
}
#zoom-fade:hover {
 -webkit-text-shadow: 0 0 0px black;
 -moz-text-shadow: 0 0 0px black;
 -ms-text-shadow: 0 0 0px black;
 -o-text-shadow: 0 0 0px black;
 text-shadow: 0 0 0px black;
}

#glow {
 -webkit-transition: 0.5s ease-in-out;
 -moz-transition: 0.5s ease-in-out;
 -ms-transition: 0.5s ease-in-out;
 -o-transition: 0.5s ease-in-out;
 transition: 0.5s ease-in-out;
 -webkit-text-shadow: 0 0 0 transparent, 0 0 0 transparent;
 -moz-text-shadow: 0 0 0 transparent, 0 0 0 transparent;
 -ms-text-shadow: 0 0 0 transparent, 0 0 0 transparent;
 -o-text-shadow: 0 0 0 transparent, 0 0 0 transparent;
 text-shadow: 0 0 0 transparent, 0 0 0 transparent;
 color: rgba(0, 0, 0, 0.1);
 overflow: visible;
}
#glow:hover {
 color: white;
 -webkit-text-shadow: 0 0 10px #ff401a, 0 0 50px #ff9b1a;
 -moz-text-shadow: 0 0 10px #ff401a, 0 0 50px #ff9b1a;
 -ms-text-shadow: 0 0 10px #ff401a, 0 0 50px #ff9b1a;
 -o-text-shadow: 0 0 10px #ff401a, 0 0 50px #ff9b1a;
 text-shadow: 0 0 10px #ff401a, 0 0 50px #ff9b1a;
}

#slide-up {
 -webkit-transition: 0.25s ease-in-out;
 -moz-transition: 0.25s ease-in-out;
 -ms-transition: 0.25s ease-in-out;
 -o-transition: 0.25s ease-in-out;
 transition: 0.25s ease-in-out;
 -webkit-text-shadow: 0 30px 0px transparent;
 -moz-text-shadow: 0 30px 0px transparent;
 -ms-text-shadow: 0 30px 0px transparent;
 -o-text-shadow: 0 30px 0px transparent;
 text-shadow: 0 30px 0px transparent;
 color: rgba(0, 0, 0, 0.1);
 overflow: visible;
}
#slide-up:hover {
 -webkit-text-shadow: 0 0px 0px black;
 -moz-text-shadow: 0 0px 0px black;
 -ms-text-shadow: 0 0px 0px black;
 -o-text-shadow: 0 0px 0px black;
 text-shadow: 0 0px 0px black;
}

#slide-right {
 -webkit-transition: 0.25s ease-in-out;
 -moz-transition: 0.25s ease-in-out;
 -ms-transition: 0.25s ease-in-out;
 -o-transition: 0.25s ease-in-out;
 transition: 0.25s ease-in-out;
 -webkit-text-shadow: -200px 0 0px transparent;
 -moz-text-shadow: -200px 0 0px transparent;
 -ms-text-shadow: -200px 0 0px transparent;
 -o-text-shadow: -200px 0 0px transparent;
 text-shadow: -200px 0 0px transparent;
 color: rgba(0, 0, 0, 0.1);
 overflow: visible;
}
#slide-right:hover {
 -webkit-text-shadow: 0px 0 0px black;
 -moz-text-shadow: 0px 0 0px black;
 -ms-text-shadow: 0px 0 0px black;
 -o-text-shadow: 0px 0 0px black;
 text-shadow: 0px 0 0px black;
}

#diag-topLeft {
 -webkit-transition: 0.25s ease-in-out;
 -moz-transition: 0.25s ease-in-out;
 -ms-transition: 0.25s ease-in-out;
 -o-transition: 0.25s ease-in-out;
 transition: 0.25s ease-in-out;
 -webkit-text-shadow: -30px -30px 0px transparent;
 -moz-text-shadow: -30px -30px 0px transparent;
 -ms-text-shadow: -30px -30px 0px transparent;
 -o-text-shadow: -30px -30px 0px transparent;
 text-shadow: -30px -30px 0px transparent;
 color: rgba(0, 0, 0, 0.1);
 overflow: visible;
}
#diag-topLeft:hover {
 -webkit-text-shadow: 0px 0 0px black;
 -moz-text-shadow: 0px 0 0px black;
 -ms-text-shadow: 0px 0 0px black;
 -o-text-shadow: 0px 0 0px black;
 text-shadow: 0px 0 0px black;
}

#flood-right {
 -webkit-transition: 0.25s ease-in-out;
 -moz-transition: 0.25s ease-in-out;
 -ms-transition: 0.25s ease-in-out;
 -o-transition: 0.25s ease-in-out;
 transition: 0.25s ease-in-out;
 -webkit-box-shadow: inset 0px 0 0 0 #ff401a;
 -moz-box-shadow: inset 0px 0 0 0 #ff401a;
 -ms-box-shadow: inset 0px 0 0 0 #ff401a;
 -o-box-shadow: inset 0px 0 0 0 #ff401a;
 box-shadow: inset 0px 0 0 0 #ff401a;
 color: rgba(0, 0, 0, 0.1);
 overflow: hidden;
}
#flood-right:hover {
 color: white;
 -webkit-box-shadow: inset 500px 0 0 0 #ff401a;
 -moz-box-shadow: inset 500px 0 0 0 #ff401a;
 -ms-box-shadow: inset 500px 0 0 0 #ff401a;
 -o-box-shadow: inset 500px 0 0 0 #ff401a;
 box-shadow: inset 500px 0 0 0 #ff401a;
}