Jump to content
  • Sign Up
Gruzin

Эффект при наведении

Recommended Posts

Без вашего кода только пример:

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ul>
* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  background: #111;
  display: flex;
  justify-content: center;
}
li {
  padding: 50px 20px;
  color: #fff;
  font-size: 20px;
  position: relative;
  z-index: 1;
}
li:not(:first-child) {
  margin-left: 10px;
}
li:before {
  content: "";
  width: 100%;
  height: 100%;
  background: gold;
  position: absolute;
  top: -100%;
  left: 0;
  transition: top 0.3s;
  z-index: -1;
}
li:hover:before {
  top: 0;
}

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By shumz
      Задача: Создать линию определённых размеров и расположить её по центру экрана.
      Код HTML: 
      <div class="line"></div>
      Код CSS:
      .line {
          position:absolute
          margin-top:650px;
          height:2px;
          width:1200px;
          background: black;
      }
    • By РоманФ
      Здравствуйте клиент хочет чтобы картинка была сверстанна полностью именно на html css, кто то сталкивался c такой проблемой? возможно есть советы по тому как это сделать правильно.
      Волна по центру и все остальные вещи должны быть заверстанны в том числе.Интересует как это сделать с минимумом костылей.
      И остро стоит вопрос чтобы это все дело было адаптивно.
      На данный момент все что смог сделать https://jsfiddle.net/RomanFF/jL9swq7h/37/ с border нормальный сделать смогу, не понимаю принцип по которому мне все сопоставить так чтобы не полетело все потом,  мне хотябы общие принципы объяснить в каком направлении дальше двигаться

    • By Five
      Как можно поднять фиолетовый блок (находится в MAIN) вверх , чтобы он заполнил верхнюю прозрачную часть заднего плана HEADER-а?
      Свое образный переход будет... 

  • Member Statistics

    46,837
    Total Members
    1,451
    Most Online
    HARDSOFT
    Newest Member
    HARDSOFT
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Ясно, спс. Теперь буду привыкать к такому поведению, хотя на мой взгляд такое поведение пригодится только тем кто случайно нажимает на эту кнопку и соглашается пометить форум прочитанным
    • Как оказалось это обновление CMS, в результате которого именно так ведёт себя эта фича. Вот что сказал саппорт:  
    • Сколько стоит организовать удалённую работу для компании Друзья, если вы готовы перенести работу компании в облако и хотите знать, сколько это стоит, провайдер облачных решений Tucha приводит конкретные расчёты, а кроме того рассказывает: ·       что влияет на стоимость выноса рабочих мест команды в облако; ·       кто и с какими данными может легко работать удалённо; ·       как просто организовать миграцию. А ещё партнёр предлагает выгодные условия на развёртывание удалённого офиса! При заказе акционного сервиса до 14 июля 2020 года включительно получите скидку 200 грн на оплату первого счёта и 1 месяц пользования сервисом TuchaBackup в подарок (в объёме диска заказанного сервиса). Чтобы воспользоваться предложением, обязательно укажите специальный промокод — TD-210-0. Для заказа звоните +380 44 583-5-583 или пишите на sales@tucha.ua. Подробно о решении и условия акционного предложения: https://bit.ly/2BucJaR  Удалённый офис — это стабильная работа всей команды отовсюду и надёжное размещение важных данных. Позаботьтесь о своём бизнесе вместе с Tucha!  
  • Popular Contributors

×
×
  • Create New...