назад к статьям

CSS Magic #1. Красивый hover-эффект

CSS
Автор: MaxGraph
Содержание

    Привет! Расскажу в этой статье, как можно сделать красивый ховер-эффект заполнения цвета.

    HTML

    <div class="main__menu">
      <div class="container">
        <nav>
          <ul>
            <li><a href="#"><span data-text="HTML/CSS"></span>HTML</a></li>
            <li><a href="#"><span data-text="JavaScript"></span>JavaScript</a></li>
            <li><a href="#"><span data-text="CSS"></span>CSS</a></li>
            <li><a href="#"><span data-text="React"></span>React</a></li>
            <li><a href="#"><span data-text="Angular"></span>Angular</a></li>
          </ul>
        </nav>
      </div>
    </div>

    Собственно, простой html-код. Единственное что важно - у span внутри ссылки есть дата-атрибут data-text. Он должен совпадать с текстом внутри самой ссылки.

    Примечание: Возможен баг при наведении, с которым я сам когда-то столкнулся на другом сайте. Может неверно отрабатывать ховер, если у вас есть слова с пробелом в этих ссылках. В таком случае внутри дата-атрибута должно быть "текстnbspтекст". Т.е. вместо пробела ставим символ nbsp. Не забудьте написать символ верно (здесь я указал его без & и ;).

    CSS

    a {
      position: relative;
      display: inline-block;
      overflow: hidden;
      font-size: vh(80);
      color: $color-white;
      opacity: 0;
      transform: translateY(-10px);
      transition: all 0.6s;

      span {
        position: absolute;
        left: 0;
        display: block;
        overflow: hidden;
        width: 0;
        height: 100%;
        font-size: vh(80);
        background-color: #111517;
        backface-visibility: hidden;
        transition: width .3s;

        &::before {
          content: attr(data-text);
          position: absolute;
          right: 0;
          display: block;
          width: 100%;
          color: $color-red;
          backface-visibility: hidden;
        }
      }

      &:hover {
        span {
          width: 100%;
          transition: width 0.3s;
        }
      }
    }

    Я пожалуй опущу тут остальные стили, только самые нужные покажу. Остальное увидите в конце статьи в codepen. Что тут собственно важно, так это overflow: hidden у ссылки и работа псевдоэлемента у span. Обратите внимание, в качестве контента указываем content: attr(data-text), это как раз таки "вызов" данных прямо из дата-атрибута. Ну и работает все по довольно простой логике - ширина span меняется с нуля до 100% плавно, благодаря transition. Вот собственно и все) И собственно сам codepen:

    Надеюсь, Вам был полезен данный прием, и Вы сумеете его использовать где-нибудь на Ваших проектах. Это был первый выпуск CSS Magic, дальше будет только интереснее)

    предыдущий пост следующий пост