Intermediate CSS3 Hover Effects. Пошаговый туториал. Часть 1 / forpes.ru

Главная
Intermediate CSS3 Hover Effects. Пошаговый туториал. Часть 1

Intermediate CSS3 Hover Effects. Пошаговый туториал. Часть 1 -3

25.12.2015 06:41

eisenfox 0 5400 Источник

Эта статья является логическим продолжением моей предыдущей статьи, посвященной основам CSS3 transitions и, если в ней я показывала принципы работы этих основ на простых примерах, сейчас я хотела бы перейти к более сложным, красивым и интересным эффектам.

Из-за большого размера статья разбита на три части. Вторая часть. Третья часть.

Демо материалы лежат здесь. Все префиксы проставлены в демо, здесь же я не буду на них акцентировать.

Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.

Подготовка к работе.

Для создания эффектов понадобится такая дефолтная html-структура. Вместо .eff в коде каждого конкретного эффекта будет использоваться класс .eff-n, где n — номер эффекта:

  <div class="eff">
    <img src="img/ef1.jpg" alt="Effect #1" />
     <div class="caption">
        <h4>Title is Here</h4>
        <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
         </p>
          <a class="btn" href="#" title="View More">View More</a>
        </div>
    </div>

По определению в каждом эффекте будет, как минимум, одна картинка, блок с описанием, включающий в себя заголовок, маленькое описание и кнопку “View More”. Кроме того, каждый эффект содержит ряд уникальных вспомогательных элементов, которые мы будем добавлять к основной структуре.

Дефолтные css-стили будут такие:

.eff {
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.eff img {
  min-width: 100%;
  min-height: 100%;

}

.eff .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
}

.eff .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff .caption p {
  width: 100%;
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

Эффект #1

Пример

Добавляем блок с иконкой в наш html-код. Он состоит контейнера с полупрозрачным фоном и вращающегося контейнера с элементами круга и иконкой внутри. Так будет выглядеть дефолтный код с новым блоком:

<div class="effect eff-1">
  <img src="img/ef1.jpg" alt="Effect #1" />
  <div class="overlay">
    <div class="circle-with-icon">
      <div class="circ left-circ"></div>
      <div class="circ top-circ"></div>
      <div class="circ right-circ"></div>
      <div class="circ bottom-circ"></div>
      <div class="icon"></div>
    </div>
  </div>
  <div class="caption">
    <h4>Title is Here</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
    </p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>

Первый этап — скрываем .caption, добавляем прозрачность и transition для плавного появления, когда оно понадобится:

.eff-1 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  opacity: 0;
  transition: all 0.2s linear 0s;
}

Дальше стилизуем .overlay, который при наведении увеличивается, выцветая до полной прозрачности:

.eff-1 .overlay {
  width: 180px;
  height: 120px;
  background: rgba(255,255,255,0.6);
  position: absolute;
  top: 90px;
  left: 60px;
  transition: transform 0.2s linear 0s, opacity 0.2s linear 0.35s;
}

Задержку для увеличения размеров и прозрачности мы установим, когда определим стили для hover-состояния этого элемента, сейчас же задержка установлена для появления .overlay после того, как hover снят, и эффекту надо принять исходное положение.

Далее создадим круг с иконкой в центре из элементов с классом .circ. Чтобы круг мог постепенно, сторона за стороной, превратиться в квадрат, мы соберем его из четырех блоков, каждому из которых будет дана лишь одна скругленная граница.

.eff-1 .overlay .circ {
  width: 80px;
  height: 80px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  position: absolute;
  top: 0px;
  left: 0px;
  background: transparent;
}

.eff-1 .overlay .left-circ {
  border-left: 2px solid black;
  transition: all 0.15s linear 0.3s;
}

.eff-1 .overlay .top-circ {
  border-top: 2px solid black;
  transition: all 0.15s linear 0.2s;
}

.eff-1 .overlay .right-circ {
  border-right: 2px solid black;
  transition: all 0.15s linear 0.1s;
}

.eff-1 .overlay .bottom-circ {
  width: 82px;
  border-bottom: 2px solid black;
  transition: all 0.15s linear 0s;
}

Стили для иконки:

.eff-1 .circle-with-icon .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 31px;
  left: 24px;
}

Задаем стили для .circle-with-icon, чтобы круг встал по центру подложки и мог вращаться:

.eff-1 .overlay .circle-with-icon {
  width: 82px;
  height: 82px;
  margin: auto;
  position: relative;
  top: 19px;
  transition: transform 0.4s linear 0s;
}

Собираем эффект.

Закручиваем .circle-with-icon:

.eff-1:hover .circle-with-icon {
  transform: rotate(360deg);
}

Превращаем круг в квадрат:

.eff-1:hover .overlay .circ {
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

Увеличиваем .overlay и меняем его прозрачность:

.eff-1:hover .overlay {
  transform: scale(5);
  opacity: 0;
  transition-delay: 0.55s;
}

Проявляем .caption:

.eff-1:hover .caption {
  opacity: 1;
  transition-delay: 0.85s;
}

Эффект #2

Пример

Для этого эффекта html-структура будет аналогична структуре предыдущего эффекта:

<div class="effect eff-2">
  <img src="img/ef2.jpg" alt="Effect #2" />
  <div class="overlay">
    <div class="circle-with-icon">
      <div class="circ left-circ"></div>
      <div class="circ top-circ"></div>
      <div class="circ right-circ"></div>
      <div class="circ bottom-circ"></div>
      <div class="icon"></div>
    </div>
  </div>
  <div class="caption">
    <h4>Title is Here</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
    </p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>

Поскольку .caption для этого эффекта выезжает справа, скроем ее, сместив вправо за край блока с эффектом:

.eff-2 .caption {
  position: absolute;
  top: 0px;
  left: 100%;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  transition: all 0.2s linear 0s;
}

Стили для элементов .caption остаются дефолтные.

Стили и логика блока с подложкой, кругом и иконкой тоже аналогичны предыдущему эффекту, кроме значений свойства transition:

.eff-2 .overlay {
  width: 180px;
  height: 120px;
  background: rgba(255,255,255,0.6);
  position: absolute;
  top: 90px;
  left: 60px;
  transition: all 0.2s linear 0.55s;
}

.eff-2 .overlay .circ {
  width: 80px;
  height: 80px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  position: absolute;
  top: 0px;
  left: 0px;
  background: transparent;
}

.eff-2 .overlay .left-circ {
  border-left: 2px solid black;
  transition: all 0.15s linear 0.3s;
}

.eff-2 .overlay .top-circ {
  width: 82px;
  border-top: 2px solid black;
  transition: all 0.15s linear 0.2s;
}

.eff-2 .overlay .right-circ {
  border-right: 2px solid black;
  transition: all 0.15s linear 0.1s;
}

.eff-2 .overlay .bottom-circ {
  width: 82px;
  border-bottom: 2px solid black;
  transition: all 0.15s linear 0s;
}

.eff-2 .circle-with-icon .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 31px;
  left: 24px;
}

Для .circle-with-icon тоже меняются transition-delay и transition-duration:

.eff-2 .overlay .circle-with-icon {
  width: 82px;
  height: 82px;
  margin: auto;
  position: relative;
  top: 19px;
  transition: all 0.2s linear 0.8s;
}

Собираем эффект.

Во-первых, .circ не только выпрямляются, но и поворачиваются на 45 градусов для создания ромба:

.eff-2:hover .overlay .circ {
  border-radius: 0px;
  transform: rotate(45deg);
}

Далее исчезает весь блок с ромбом и иконкой:

.eff-2:hover .overlay .circle-with-icon {
  opacity: 0;
  transition-delay: 0.4s;
}

Подложка расширяется на весь размер блока с эффектом:

.eff-2:hover .overlay {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

Выезжает .caption:

.eff-2:hover .caption {
  left: 0px;
  transition-delay: 0.7s;
}

Эффект #3

Пример

Для этого эффекта html-структура аналогична эффектам #1-2, здесь тоже добавляется блок с подложкой, кругом и иконкой:

<div class="effect eff-3">
  <img src="img/ef3.jpg" alt="Effect #3" />
  <div class="overlay">
    <div class="circle-with-icon">
      <div class="circ left-circ"></div>
      <div class="circ top-circ"></div>
      <div class="circ right-circ"></div>
      <div class="circ bottom-circ"></div>
      <div class="icon"></div>
    </div>
  </div>
  <div class="caption">
    <h4>Title is Here</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
    </p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>

В этот раз .caption смещаем вверх за край блока с эффектом:

.eff-3 .caption {
  position: absolute;
  top: -100%;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  transition: all 0.2s linear 0s;
}

Стили для элементов .caption остаются дефолтные.

Устанавливаем новые значения transition для .overlay:

.eff-3 .overlay {
  width: 180px;
  height: 120px;
  background: rgba(255,255,255,0.6);
  position: absolute;
  top: 90px;
  left: 60px;
  transition: all 0.2s linear 0.65s;
}

Стили .circ и .circle-with-icon остаются такими же, как в эффектах #1-2:

.eff-3 .overlay .circ {
  width: 80px;
  height: 80px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  position: absolute;
  top: 0px;
  left: 0px;
  background: transparent;
}

.eff-3 .overlay .circle-with-icon {
  width: 82px;
  height: 82px;
  margin: auto;
  position: relative;
  top: 19px;
  opacity: 1;
}

Поскольку при наведении у разных частей окружности будет разное поведение, значение transition для них будет тоже отличаться.

Левая и правая стороны просто медленно выцветают:

.eff-3 .overlay .left-circ {
  border-left: 2px solid black;
  transition: border-color 0.3s linear 0s;
}

.eff-3 .overlay .right-circ {
  border-right: 2px solid black;
  transition: border-color 0.3s linear 0s;
}

Нижняя сторона распрямляется, уходит вправо и становится прозрачной через небольшой промежуток времени, чтобы, когда мы снимем hover, мы не увидели, как она возвращается на место:

.eff-3 .overlay .bottom-circ {
  width: 82px;
  border-bottom: 2px solid black;
  transition: border-radius 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s;
}

Ну и верхняя часть делает все то же, что и нижняя, только, распрямляясь, еще уходит вниз:

.eff-3 .overlay .top-circ {
  width: 82px;
  border-top: 2px solid black;
  transition: border-radius 0.3s linear 0s, top 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s;
}

Для иконки тоже добавляются transition:

.eff-3 .circle-with-icon .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 31px;
  left: 24px;
  transition: left 0.3s linear 0.45s, opacity 0.01s linear 0.75s;
}

Собираем эффект.

Сначала исчезают правая и левая сторона круга:

.eff-3:hover .overlay .left-circ,
.eff-3:hover .overlay .right-circ {
  border-color: transparent;
}

Потом верхняя часть спускается к нижней:

.eff-3:hover .overlay .top-circ {
  top: 93%;
}

В процессе они обе распрямляются и после этого отъезжают вправо:

.eff-3:hover .overlay .top-circ,
.eff-3:hover .overlay .bottom-circ {
  -webkit-border-radius: 0px;
  border-radius: 0px;
  left: 500%;
  opacity: 0;
}

Иконка уезжает влево:

.eff-3:hover .circle-with-icon .icon {
  left: -500%;
  opacity: 0;
}

Подложка схлопывается в центр:

.eff-3:hover .overlay {
  transform: scale(0);
}

И появляется .caption:

.eff-3:hover .caption {
  top: 0px;
  transition-delay: 0.75s;
}

Эффект #4

Пример

Дополним базовую html-структуру блоком с подложкой, иконкой и границами, появляющимися при наведении:

<div class="effect eff-4">
  <img src="img/ef4.jpg" alt="Effect #4" />
  <div class="overlay">
    <div class="icon"></div>
    <div class="borders">
      <div class="border border-top"></div>
      <div class="border border-right"></div>
      <div class="border border-bottom"></div>
      <div class="border border-left"></div>
    </div>
  </div>
  <div class="caption">
    <h4>Title is Here</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
    </p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>

Далее скрываем .caption, но не целиком, а каждый элемент отдельно, чтобы они появлялись по очереди:

.eff-4 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
}

.eff-4 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
  opacity: 0;
  transition: all 0.2s linear 0s;
}

.eff-4 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-4 .caption p {
  width: 100%;
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
  opacity: 0;
  transition: all 0.2s linear 0s;
}

.eff-4 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  opacity: 0;
  text-decoration: none;
  transition: all 0.2s linear 0s;
}

Теперь стилизуем .overlay и иконку. Для иконки необходим отдельный transition, так как она будет исчезать во время расширения подложки.

.eff-4 .overlay {
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.6);
  position: absolute;
  top: 120px;
  left: 120px;
  transition: all 0.2s linear 0s;
}

.eff-4 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 18px;
  left: 13px;
  opacity: 1;
  transition: all 0.01s linear 0.2s;
}

Далее нужно указать стили для контейнера с границами:

.eff-4 .borders {
  width: 90%;
  height: 90%;
  position: absolute;
  top: 5%;
  left: 5%;
  opacity: 0;
  transition: all 0.01s linear 0s;
}

Общие стили для всех границ:

.eff-4 .border {
  background: black;
  position: absolute;
  transition: all 0.2s linear 0s;
}

И положение, ширину и высоту для каждой отдельно:

.eff-4 .border-top {
  height: 2px;
  width: 0px;
  top: 0px;
  left: 0px;
}

.eff-4 .border-right {
  height: 0px;
  width: 2px;
  top: 2px;
  right: 0px;
}

.eff-4 .border-bottom {
  height: 2px;
  width: 0px;
  bottom: 0px;
  right: 2px;
}

.eff-4 .border-left {
  height: 0px;
  width: 2px;
  bottom: 2px;
  left: 0px;
}

Собираем эффект.

Сначала расширяется подложка:

.eff-4:hover .overlay {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

Одновременно с этим исчезает иконка. Для нее мы отменяем при наведении transition-delay, чтобы исчезла она сразу, как только подложка начнет расширяться, но, если мы снимем hover, она появится только после того, как подложка вернется к своим правильным размерам.

.eff-4:hover .overlay .icon {
  opacity: 0;
  transition-delay: 0s;
}

Далее меняем прозрачность контейнера с границами:

.eff-4:hover .borders {
  opacity: 1;
}

И, наконец, меняем размеры каждой из границ, подбирая такие transition-delay, чтобы границы изменялись одна за другой:

.eff-4:hover .border-top {
  width: 100%;
  transition-delay: 0.2s;
}

.eff-4:hover .border-right {
  height: 100%;
  max-height: calc(100% - 2px);
  transition-delay: 0.4s;
}

.eff-4:hover .border-bottom {
  width: 100%;
  max-width: calc(100% - 2px);
  transition-delay: 0.6s;
}

.eff-4:hover .border-left {
  height: 100%;
  max-height: calc(100% - 4px);
  transition-delay: 0.8s;
}

Остается только показать элементы .caption:

.eff-4:hover .caption h4,
.eff-4:hover .caption p,
.eff-4:hover .caption a {
  opacity: 1;
}

.eff-4:hover .caption h4 {
  transition-delay: 0.65s;
}

.eff-4:hover .caption p {
  transition-delay: 0.7s;
}

.eff-4:hover .caption a {
  transition-delay: 0.75s;
}

Эффект #5

Пример

В этот раз дополним дефолтную структуру двумя блоками с границами, внешним и внутренним:

<div class="effect eff-5">
  <img src="img/ef5.jpg" alt="Effect #5" />
  <div class="overlay">
    <div class="icon"></div>
    <div class="borders">
      <div class="border border-top"></div>
      <div class="border border-right"></div>
      <div class="border border-bottom"></div>
      <div class="border border-left"></div>
    </div>
    <div class="borders-small">
      <div class="border border-top"></div>
      <div class="border border-right"></div>
      <div class="border border-bottom"></div>
      <div class="border border-left"></div>
    </div>
  </div>
  <div class="caption">
    <h4>Title is Here</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
    </p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>

В этот раз элементы .caption тоже будут скрываться по одному:

.eff-5 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
}

.eff-5 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
  opacity: 0;
  transition: all 0.2s linear 0s;
}

.eff-5 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-5 .caption p {
  width: 100%;
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
  opacity: 0;
  transition: all 0.2s linear 0s;
}

.eff-5 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  opacity: 0;
  text-decoration: none;
  transition: all 0.2s linear 0s;
}

Дальше идут стили для подложки и иконки:

.eff-5 .overlay {
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.6);
  position: absolute;
  top: 120px;
  left: 120px;
  transition: all 0.2s linear 0s;
}

.eff-5 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 18px;
  left: 13px;
  opacity: 1;
  transition: all 0.01s linear 0.2s;
}

Обозначаем стили для двух контейнеров с границами:

.eff-5 .borders {
  width: 90%;
  height: 90%;
  position: absolute;
  top: 5%;
  left: 5%;
  opacity: 0;
  transition: all 0.01s linear 0s;
}

.eff-5 .borders-small {
  width: 88%;
  height: 88%;
  position: absolute;
  top: 6%;
  left: 6%;
  opacity: 0;
  transition: all 0.01s linear 0s;
}

Общие стили для всех вообще границ, больших и маленьких:

.eff-5 .border {
  background: black;
  position: absolute;
  transition: all 0.3s linear 0s;
}

Теперь стили для каждой границы. Маленькие от больших отличаются начальными координатами так, чтобы, при наведении, они увеличивались навстречу друг другу:

.eff-5 .borders .border-top {
  top: 0px;
  left: 0px;
  width: 0px;
  height: 2px;
}

.eff-5 .borders .border-left {
  top: 0px;
  left: 0px;
  width: 2px;
  height: 0px;
}

.eff-5 .borders .border-bottom {
  bottom: 0px;
  right: 0px;
  width: 0px;
  height: 2px;
}

.eff-5 .borders .border-right {
  bottom: 0px;
  right: 0px;
  width: 2px;
  height: 0px;
}

.eff-5 .borders-small .border-top {
  top: 0px;
  right: 0px;
  width: 0px;
  height: 2px;
}

.eff-5 .borders-small .border-left {
  bottom: 0px;
  left: 0px;
  width: 2px;
  height: 0px;
}

.eff-5 .borders-small .border-bottom {
  bottom: 0px;
  left: 0px;
  width: 0px;
  height: 2px;
}

.eff-5 .borders-small .border-right {
  top: 0px;
  right: 0px;
  width: 2px;
  height: 0px;
}

Собираем эффект.

При наведении расширяем подложку и убираем иконку. Подробнее про transition-delay для иконки я писала для эффекта #4.

.eff-5:hover .overlay {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

.eff-5:hover .overlay .icon {
  opacity: 0;
  transition-delay: 0s;
}

Меняем прозрачность для контейнеров с границами:

.eff-5:hover .borders,
.eff-5:hover .borders-small {
  opacity: 1;
}

Определяем стили для движения границ:

.eff-5:hover .border-top,
.eff-5:hover .border-bottom {
  width: 100%;
  transition-delay: 0.2s;
}

.eff-5:hover .border-left,
.eff-5:hover .border-right {
  height: 100%;
  transition-delay: 0.2s;
}

Осталось проявить элементы .caption снизу вверх с большим промежутком по времени, чем с эффектом #4:

.eff-5:hover .caption h4,
.eff-5:hover .caption p,
.eff-5:hover .caption a {
  opacity: 1;
}

.eff-5:hover .caption h4 {
  transition-delay: 0.75s;
}

.eff-5:hover .caption p {
  transition-delay: 0.65s;
}

.eff-5:hover .caption a {
  transition-delay: 0.55s;
}

Эффект #6

Пример

Дефолтная структура дополняется одним блоком с подложкой, иконкой и границами:

<div class="effect eff-6">
  <img src="img/ef6.jpg" alt="Effect #6" />
  <div class="overlay">
    <div class="icon"></div>
    <div class="borders">
      <div class="border border-top"></div>
      <div class="border border-right"></div>
      <div class="border border-bottom"></div>
      <div class="border border-left"></div>
    </div>
  </div>
  <div class="caption">
    <h4>Title is Here</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
    </p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>

Поскольку .caption появляется из центра, увеличиваясь, как и подложка, применим такие стили:

.eff-6 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s linear 0s;
}

У всех элементов .caption остаются дефолтные стили.

Стили для .overlay и иконки:

.eff-6 .overlay {
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.6);
  position: absolute;
  top: 120px;
  left: 120px;
  transition: all 0.2s linear 0s;
}

.eff-6 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 18px;
  left: 13px;
  opacity: 1;
  transition: all 0.01s linear 0.2s;
}

Стили для контейнера с границами:

.eff-6 .borders {
  width: 90%;
  height: 90%;
  position: absolute;
  top: 5%;
  left: 5%;
  opacity: 0;
  transition: all 0.01s linear 0s;
}

Общие стили для всех границ:

.eff-6 .border {
  background: black;
  position: absolute;
  transition: all 0.4s linear 0s;
}

Теперь прописываем стили для каждой границы отдельно. Самое важное — это transform-origin, определяющий, относительно какой точки будет прокручиваться каждая граница:

.eff-6 .border-top {
  top: 0px;
  left: 2px;
  width: 100%;
  height: 2px;
  transform-origin: left top;
}

.eff-6 .border-left {
  bottom: 0px;
  left: 0px;
  width: 2px;
  height: 100%;
  transform-origin: left bottom;
}

.eff-6 .border-bottom {
  bottom: 0px;
  right: 2px;
  width: 100%;
  height: 2px;
  transform-origin: right bottom;
}

.eff-6 .border-right {
  top: 0px;
  right: 0px;
  width: 2px;
  height: 100%;
  transform-origin: right top;
}

Собираем эффект.

Расширяем .overlay и убираем иконку. Подробнее про transition-delay для иконки я писала для эффекта #4.

.eff-6:hover .overlay {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

.eff-6:hover .overlay .icon {
  opacity: 0;
  transition-delay: 0s;
}

Меняем прозрачность для блока с границами:

.eff-6:hover .borders {
  opacity: 1;
}

Теперь прокручиваем границы на 90 градусов относительно заданной точки:

.eff-6:hover .border-top,
.eff-6:hover .border-left,
.eff-6:hover .border-bottom,
.eff-6:hover .border-right {
  transform: rotate(90deg);
  transition-delay: 0.2s;
}

И увеличиваем .caption:

.eff-6:hover .caption {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.65s;
}

Эффект #7

Пример

В этом эффекте картинка уезжает вправо, распадаясь на пять частей. Чтобы создать иллюзию пяти кусочков, нам надо добавить в html структуру столько копий картинки, на сколько частей мы хотим ее разделить, и будем оперировать каждой картинкой как отдельным кусочком общего изображения:

<div class="effect eff-7">
  <div class="img-block">
    <div class="img img-1">
      <img src="img/ef7.jpg" alt="Effect #7" />
    </div>  
    <div class="img img-2">
      <img src="img/ef7.jpg" alt="Effect #7" />
    </div>  
    <div class="img img-3">
      <img src="img/ef7.jpg" alt="Effect #7" />
    </div>
    <div class="img img-4">
      <img src="img/ef7.jpg" alt="Effect #7" />
    </div>
    <div class="img img-5">
      <img src="img/ef7.jpg" alt="Effect #7" />
    </div>
  </div>
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="caption">
    <h4>Title is Here</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
    </p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>

Зададим стили для .img-block и для всех .img:

.eff-7 .img-block {
  position: relative;
  height: 100%;
}

.eff-7 .img-block .img {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: all 0.2s linear 0s;
}

Теперь задача разместить каждый тег img и картинку внутри него так, чтобы все выглядело, как будто у нас одна картинка. Поэтому .img блоки мы будем размещать один под другим внахлест с отступом в 20%, увеличивая z-index каждому следующему, а картинку в каждом из них будем перемещать относительно самого блока на 20% выше.

Так в первом .img-блоке, располагающемся на самом верху, никаких изменений не будет, и вот его стили:

.eff-7 .img-block .img-1 {
  top: 0px;
  left: 0px;
  z-index: 2;
}

Второй блок надо опустить на 20% ниже, а картинку в нем поднять на 20% вверх:

.eff-7 .img-block .img-2 {
  top: 20%;
  left: 0px;
  z-index: 3;
}

.eff-7 .img-block .img-2 img {
  transform: translateY(-20%);
}

Третий, четвертый и пятый опускаются на 40%, 60% и 80% соответственно, картинки в них поднимаются на аналогичное количество процентов:

.eff-7 .img-block .img-3 {
  top: 40%;
  left: 0px;
  z-index: 4;
}

.eff-7 .img-block .img-3 img {
  transform: translateY(-40%);
}

.eff-7 .img-block .img-4 {
  top: 60%;
  left: 0px;
  z-index: 5;
}

.eff-7 .img-block .img-4 img {
  transform: translateY(-60%);
}

.eff-7 .img-block .img-5 {
  top: 80%;
  left: 0px;
  z-index: 6;
}

.eff-7 .img-block .img-5 img {
  transform: translateY(-80%);
}

Переходим к .caption, скрытому, благодаря z-index, под всеми картинками. Для .caption прописываем прозрачность, иначе этот блок будет на секунду виден, пока подгружаются картинки, что приведет к эффекту “мигания”.

.eff-7 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  z-index: 1;
  transition: all 0.01s linear 0.2s;
}

Стили элементов .caption остаются дефолтными.

Осталось сделать только .overlay с иконкой:

.eff-7 .overlay {
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.6);
  position: absolute;
  left: 70%;
  top: 70%;
  border-radius: 500px;
  z-index: 10;
  transition: all 0.2s linear 0.2s;
}

.eff-7 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 47px;
  left: 40px;
}

Собираем эффект.

Сначала на hover уходит вниз и вбок .overlay:

.eff-7:hover .overlay {
  top: 100%;
  left: 100%;
  transition-delay: 0s;
}

Потом все .img-блоки съезжают в сторону по одному. Ну а поскольку transition-delay, отличный от 0s, мы проставили им только на hover, обратно все блоки возвращаются одновременно, как единое целое.

.eff-7:hover .img-block .img {
  left: 100%;
}

.eff-7:hover .img-block .img-1 {
  transition-delay: 0.2s;
}

.eff-7:hover .img-block .img-2 {
  transition-delay: 0.3s;
}

.eff-7:hover .img-block .img-3 {
  transition-delay: 0.4s;
}

.eff-7:hover .img-block .img-4 {
  transition-delay: 0.5s;
}

.eff-7:hover .img-block .img-5 {
  transition-delay: 0.6s;
}

И убираем прозрачность .caption:

.eff-7:hover .caption {
  opacity: 1;
}

Эффект #8

Пример

Точно так же, как и в прошлом эффекте, у нас здесь не одна картинка, а пять картинок, ложащихся друг на друга внахлест, манипулируя ими, мы создадим иллюзию распада одной картинки на пять частей. Структура html такая:

<div class="effect eff-8">
  <div class="img-block">
    <div class="img img-1">
      <img src="img/ef8.jpg" alt="Effect #8" />
    </div>  
    <div class="img img-2">
      <img src="img/ef8.jpg" alt="Effect #8" />
    </div>  
    <div class="img img-3">
      <img src="img/ef8.jpg" alt="Effect #8" />
    </div>
    <div class="img img-4">
      <img src="img/ef8.jpg" alt="Effect #8" />
    </div>
    <div class="img img-5">
      <img src="img/ef8.jpg" alt="Effect #8" />
    </div>
  </div>
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="caption">
    <h4>Title is Here</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
    </p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>

Стили для .img-block и общие для всех .img:

.eff-8 .img-block {
  position: relative;
  height: 100%;
}

.eff-8 .img-block .img {
  position: absolute;
  width: 100%;
  height: 100%; 
  overflow: hidden;
  transition: all 0.2s linear 0s;
}

В данном случае мы смещаем каждый .img блок на 20% ниже и левее относительно предыдущего, увеличивая ему z-index, а картинку в нем на 20% выше и правее, соответственно, образуя .img-блоками своего рода “уголок” (подробнее в эффекте #7).

.eff-8 .img-block .img-1 {
  top: 0px;
  left: 0px;
  z-index: 2;
}

.eff-8 .img-block .img-2 {
  top: 20%;
  right: 20%;
  z-index: 3;
}

.eff-8 .img-block .img-2 img {
  transform: translate(20%, -20%);
}

.eff-8 .img-block .img-3 {
  top: 40%;
  right: 40%;
  z-index: 4;
}

.eff-8 .img-block .img-3 img {
  transform: translate(40%, -40%);
}

.eff-8 .img-block .img-4 {
  top: 60%;
  right: 60%;
  z-index: 5;
}

.eff-8 .img-block .img-4 img {
  transform: translate(60%, -60%);
}

.eff-8 .img-block .img-5 {
  top: 80%;
  right: 80%;
  z-index: 6;
}

.eff-8 .img-block .img-5 img {
  transform: translate(80%, -80%);
}

Стили к .caption аналогичны стилям в эффекте #7, про необходимость прозрачности можно прочитать там же:

.eff-8 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  z-index: 1;
  transition: all 0.01s linear 0.2s;
}

Прочие элементы .caption имеют дефолтные стили.

Добавляем .overlay и иконка:

.eff-8 .overlay {
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.6);
  position: absolute;
  left: 70%;
  top: 70%;
  border-radius: 500px;
  z-index: 10;
  transition: all 0.2s linear 0.2s;
}

.eff-8 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 47px;
  left: 40px;
}

Собираем эффект.

Исчезает .overlay:

.eff-8:hover .overlay {
  top: 100%;
  left: 100%;
  transition-delay: 0s;
}

Уменьшаем прозрачность .img блокам, чтобы они исчезали по очереди:

.eff-8:hover .img-block .img {
  opacity: 0;
}

.eff-8:hover .img-block .img-1 {
  transition-delay: 0.25s;
}

.eff-8:hover .img-block .img-2 {
  transition-delay: 0.4s;
}

.eff-8:hover .img-block .img-3 {
  transition-delay: 0.55s;
}

.eff-8:hover .img-block .img-4 {
  transition-delay: 0.7s;
}

.eff-8:hover .img-block .img-5 {
  transition-delay: 0.85s;
}

Возвращаем прозрачность для .caption:

.eff-8:hover .caption {
  opacity: 1;
}

Эффект #9

Пример

В данном случае, картинка распадается на 4 части, так что у нас будет всего 4 блока с чуть более сложным позиционированием картинок внутри, чем в эффекте #7, где я подробно рассказывала, как работает этот механизм.

<div class="effect eff-9">
  <div class="img-block">
    <div class="img img-1">
      <img src="img/ef9.jpg" alt="Effect #9" />
    </div>  
    <div class="img img-2">
      <img src="img/ef9.jpg" alt="Effect #9" />
    </div>  
    <div class="img img-3">
      <img src="img/ef9.jpg" alt="Effect #9" />
    </div>
    <div class="img img-4">
      <img src="img/ef9.jpg" alt="Effect #9" />
    </div>
  </div>
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="caption">
    <h4>Title is Here</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
    </p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>

Стили для .img-block и общие для всех .img:

.eff-9 .img-block {
  position: relative;
  height: 100%;
}

.eff-9 .img-block .img {
  position: absolute;
  width: 100%;
  overflow: hidden;
  transition: all 0.25s linear 0s;
}

Теперь разместим каждый .img блок на свое место. Первый будет в левом верхнем углу, и картинку внутри мы не трогаем:

.eff-9 .img-block .img-1 {
  top: 0px;
  left: 0px;
  z-index: 2;
  height: 100%; 
}

Второй блок поместим в правый верхний угол, а картинку сместим на 50% влево:

.eff-9 .img-block .img-2 {
  top: 0%;
  left: 50%;
  z-index: 3;
  height: 100%;
}

.eff-9 .img-block .img-2 img {
  transform: translate(-50%, 0);
}

Третий блок встанет внизу слева, картинку смещаем на 50% вверх:

.eff-9 .img-block .img-3 {
  top: 50%;
  left: 0%;
  z-index: 4;
  height: 100%;
}

.eff-9 .img-block .img-3 img {
  transform: translate(0%, -50%);
}

Ну а четвертый — внизу справа, и картинка сместится вверх и влево:

.eff-9 .img-block .img-4 {
  top: 50%;
  left: 50%;
  z-index: 5;
  height: 100%;
}

.eff-9 .img-block .img-4 img {
  transform: translate(-50%, -50%);
}

Таким образом, осталось только разместить .overlay и .caption аналогично эффектам #7 — #8. О необходимости прозрачности для .caption более подробно рассказано в эффекте #7.

.eff-9 .overlay {
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.6);
  position: absolute;
  left: 70%;
  top: 70%;
  border-radius: 500px;
  z-index: 10;
  transition: all 0.3s linear 0s;
}

.eff-9 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 47px;
  left: 40px;
}

.eff-9 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  z-index: 1;
  transition: all 0.01s linear 0.4s;
}

Все элементы .caption имеют дефолтные стили.

Собираем эффект.

Убираем .overlay и возвращаем непрозрачность .caption:

.eff-9:hover .overlay {
  top: 100%;
  left: 100%;
  transition-delay: 0s;
}

.eff-9:hover .caption {
  opacity: 1;
}

Теперь по одному делаем прозрачными блоки с картинками:

.eff-9:hover .img-block .img {
  opacity: 0;
}

.eff-9:hover .img-block .img-1 {
  transition-delay: 0.2s;
}

.eff-9:hover .img-block .img-2 {
  transition-delay: 0.4s;
}

.eff-9:hover .img-block .img-3 {
  transition-delay: 0.6s;
}

.eff-9:hover .img-block .img-4 {
  transition-delay: 0.8s;
}

Эффект #10

Пример

Для этого эффекта дефолтная html-структура пополнится блоком .overlay с иконкой и блоком для градиента:

<div class="effect eff-10">
  <img src="img/ef10.jpg" alt="Effect #10" />
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="gradient"></div>
  <div class="caption">
    <h4>Title is Here</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
    </p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>

Стили для .caption таковы, что .caption будет раскрываться из центра по вертикали.

.eff-10 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  transform: scaleY(0);
  transition: all 0.2s linear 0s;
}

У элементов .caption стили — дефолтные.

Теперь стилизуем .overlay:

.eff-10 .overlay {
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-bottom: 50px solid rgba(255,255,255,0.6);
  border-right: 50px solid rgba(255,255,255,0.6);
  position: absolute;
  right: 0;
  bottom: 0;
  transform-origin: right;
  transition: all 0.2s linear 0s;
}

Для Transform-origin мы выставляем значение только по оси X, ось Y нам здесь не нужна: как видим, трансформация происходит только по горизонтали.

Стили для иконки, исчезающей, как только начинается анимация .overlay, что мы выставим на hover, и возвращающейся, когда та уже почти закончилась, что мы определим прямо сейчас:

.eff-10 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 9px;
  left: 5px;
  transition: all 0.01s linear 0.2s;
}

Теперь блок с градиентом. Чтобы создать градиент, нам надо указать, во-первых, его вид, в данном случае — радиальный, во-вторых, форму для радиального градиента: круг или эллипс, и, в данном случае, это круг, ну а, в-третьих, не меньше двух цветов для перехода, первый — тот, что в центре, второй — тот, что будет по краям.

.eff-10 .gradient {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7));
  opacity: 0;
  transition: all 0.3s linear 0.2s;
}

Собираем эффект.

Сначала убираем вправо .overlay:

.eff-10:hover .overlay {
  transform: scaleX(0);
}

.eff-10:hover .overlay .icon {
  opacity: 0;
  transition-delay: 0s;
}

Меняем прозрачность блока с градиентом:

.eff-10:hover .gradient {
  opacity: 1;
  transition-delay: 0.2s;
}

Разворачиваем .caption из центра:

.eff-10:hover .caption {
  transform: scaleY(1);
  transition-delay: 0.45s;
}

Эффект #11

Пример

Для этого эффекта, аналогично предыдущему, html-структура дополняется блоком подложки с иконкой и блоком с градиентом:

<div class="effect eff-11">
  <img src="img/ef11.jpg" alt="Effect #11" />
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="gradient"></div>
  <div class="caption">
    <h4>Title is Here</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
    </p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>

Стили для .caption:

.eff-11 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  opacity: 0;
  transition: all 0.2s linear 0s;
}

Элементы .caption имеют дефолтные стили.

Теперь градиентный блок. В отличие от радиального градиента, который рассматривался в эффекте #10, линейный градиент строится чуть иначе. Ему необходимо указать направление, в котором может быть один параметр, если градиент вертикальный или горизонтальный, и два параметра, если градиент диагональный. Кроме того, направление может быть задано в градусах, что более подробно рассматривается для эффекта #12. В остальном все аналогично.

Кроме того, мы масштабируем градиентный блок по оси X до нуля и устанавливаем точку, относительно которой будет происходить анимация, в крайнее левое положение, таким образом, блок будет разворачиваться слева направо, становясь в процессе все более непрозрачным:

.eff-11 .gradient {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%);
  transform: scaleX(0);
  opacity: 0;
  transform-origin: left;
  transition: transform 0.15s linear 0s, opacity 0.55s linear 0s;
}

Блок .overlay с иконкой подробнее объяснен в описании эффекта #10:

.eff-11 .overlay {
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-bottom: 50px solid rgba(255,255,255,0.6);
  border-right: 50px solid rgba(255,255,255,0.6);
  position: absolute;
  right: 0;
  bottom: 0;
  transform-origin: right;
  transition: all 0.2s linear 0s;
}

.eff-11 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 9px;
  left: 5px;
  transition: all 0.01s linear 0.2s;
}

Собираем эффект.

Убираем вправо .overlay:

.eff-11:hover .overlay {
  transform: scaleX(0);
}

.eff-11:hover .overlay .icon {
  opacity: 0;
  transition-delay: 0s;
}

Выдвигаем блок с градиентом:

.eff-11:hover .gradient {
  transform: scaleX(1);
  opacity: 1;
  transition-delay: 0.2s;
}

И к моменту, когда блок с градиентом почти полностью получил opacity: 1; появляется .caption:

.eff-11:hover .caption {
  opacity: 1;
  transition-delay: 0.5s;
}

Intermediate CSS3 Hover Effects. Пошаговый туториал. Часть 1 -3

Комментарии (0)