Подробное описание и демонстрация работы эффекта наведения для ссылки под номером №47 для библиотеки Bootstrap. Html и CSS код для оформления ссылок на сайте как на изображении.
HTML разметка и CSS стили для оформления ссылок на сайте<div class="demo"> <a href="#" class="link"> <span>hover me</span> <div class="overlay"> <span>H</span><span>O</span><span>V</span><span>E</span><span>R</span> <span>M</span><span>E</span> </div> </a> </div>
.link{ font-family: 'Signika', sans-serif; display: inline-block; overflow: hidden; position: relative; z-index: 1; } .link span{ color: #192a56; font-size: 28px; font-weight: 600; line-height: 25px; text-transform: uppercase; display: block; transition: all 0.3s ease-in-out; } .link:hover span{ transform: translateY(50px); } .link .overlay{ height: 100%; width: 100%; position: absolute; top: 0; left: 0; } .overlay span{ color: #e84118; display: inline-block; transform: translateY(-40px); transition: all 0.1s ease-out; } .overlay span:nth-child(2){ transition-delay: 0.03s; } .overlay span:nth-child(3){ transition-delay: 0.06s; } .overlay span:nth-child(3){ transition-delay: 0.1s; } .overlay span:nth-child(4){ transition-delay: 0.13s; } .overlay span:nth-child(5){ transition-delay: 0.16s; } .overlay span:nth-child(6){ transition-delay: 0.2s; } .overlay span:nth-child(7){ transition-delay: 0.23s; } .link:hover .overlay span{ transform:translateY(0); } @media only screen and (max-width: 990px){ .link span{ font-size: 20px; } } @media only screen and (max-width: 767px){ .link{ margin-bottom: 20px; } }