Pull to refresh

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

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

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

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

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



Эффект #12

Пример

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

<div class="effect eff-12">
  <img src="img/ef12.jpg" alt="Effect #12" />
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="gradient"></div>
  <div class="inner-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>


Устанавливаем первый градиент. Подробнее о том, как составлять линейные градиенты, я писала для эффекта #11.

.eff-12 .gradient {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 1;
  background: linear-gradient(60deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%);
  transition: all 0.25s linear 0.2s;
} 


И второй градиент, который появится при наведении:

.eff-12 .inner-gradient {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%);
  transition: all 0.25s linear 0.2s;
}


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

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


У прочих элементов .caption дефолтные стили.

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

.eff-12 .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-12 .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-12:hover .gradient {
  opacity: 0;
}


Одновременно с этим делаем блок со вторым градиентом непрозрачным:

.eff-12:hover .inner-gradient {
  opacity: 1;
}


Убираем .overlay и иконку:

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

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


И выезжает .caption:

.eff-12:hover .caption {
  left: 0px;
  transition-delay: 0.35s;
}


Эффект #13

Пример

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

<div class="effect eff-13">
  <img src="img/ef13.jpg" alt="Effect #13" />
  <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>


В первую очередь, мы меняем стили для изображения. Чтобы у нас была возможность при наведении “отдалить” от нас картинку, ее надо сначала “приблизить”, что достигается увеличением:

.eff-13 img {
  min-width: 100%;
  min-height: 100%;
  transform: scale(1.3);
  transition: all 0.15s linear 0s;
}


Дальше даем стили иконке и .overlay. Иконке даем дополнительный transition, чтобы она исчезала спустя 0.1s после запуска анимации (установим на hover), а возвращалась сразу при отмене hover:

.eff-13 .overlay {
  width: 100%;
  height: 45px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(255,255,255,0.6);
  transition: all 0.15s linear 0s;
}

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


Устанавливаем стили для .caption и его элементов: каждому необходим свой собственный transition, поскольку появляются они с разным значением transition-delay (укажем значение задержки отдельно на hover), а кроме того, выставляем значение прозрачности на 0.

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

.eff-13 .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-13 .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-13 .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-13 .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-13:hover img {
  transform: scale(1);
}


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

.eff-13:hover .overlay {
  transform: scaleX(0);
  transition-delay: 0.1s;
}

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


Делаем элементы .caption видимыми:

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

.eff-13:hover .caption h4 {
  transition-delay: 0.5s;
}

.eff-13:hover .caption p {
  transition-delay: 0.4s;
}

.eff-13:hover .caption a {
  transition-delay: 0.3s;
}


Эффект #14

Пример

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

<div class="effect eff-14">
  <img src="img/ef14.jpg" alt="Effect #14" />
  <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>


Сначала стилизуем картинку. Чтобы ее можно было подвинуть таким образом, мы добавляем ей столько дополнительных пикселей к ширине, на сколько планируем двигать, и к высоте, соответственно, чтобы не нарушить пропорций. Заранее смещаем картинку на добавленное число пикселей в направлении, противоположном движению, чтобы подвинуть слева направо. Если не сместим, получим движение справа налево.

.eff-14 img {
  min-width: 100%;
  min-height: 100%;
  height: calc(100% + 30px);
  width: calc(100% + 30px);
  transform: translate(-30px,0);
  transition: all 0.15s linear 0s;
}


Теперь зададим полупрозрачный блок с иконкой, о необходимости transition для которой я подробнее рассказывала для эффекта #13:

.eff-14 .overlay {
  width: 100%;
  height: 45px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(255,255,255,0.6);
  transition: all 0.15s linear 0s;
}

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


Проставляем стили для элементов .caption. В этот раз значение transition-timing-function будет сложнее, чем обычно, чтобы создать bounce-эффект, кроме того, смещаем их вверх, на высоту, с которой им предстоит “падать”:

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

.eff-14 .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;
  top: -200px;
  transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s;
}

.eff-14 .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-14 .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;
  position: relative;
  top: -250px;
  transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s;
}

.eff-14 .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;
  top: -300px;
  position: relative;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s;
}


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

Смещаем картинку слева направо. Если бы нам понадобилось смещать ее справа налево, то здесь мы бы указали необходимое число пикселей в первом параметре, а в дефолтном значении выше проставили бы в этом параметре 0px:

.eff-14:hover img {
  transform: translate(0,0);
}


Дальше уменьшаем подложку:

.eff-14:hover .overlay {
  transform: scaleX(0);
  transition-delay: 0.1s;
}

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


И опускаем элементы .caption:

.eff-14:hover .caption h4,
.eff-14:hover .caption p,
.eff-14:hover .caption a {
  top: 0px;
}

.eff-14:hover .caption h4 {
  transition-delay: 0.5s;
}

.eff-14:hover .caption p {
  transition-delay: 0.4s;
}

.eff-14:hover .caption a {
  transition-delay: 0.3s;
}


Эффект #15

Пример

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

<div class="effect eff-15">
  <img src="img/ef15.jpg" alt="Effect #15" />
  <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>


Стилизуем картинку. В этом эффекте мы двигаем ее и слева направо, и сверху вниз, и увеличиваем. Таким образом, мы увеличиваем ее ширину и высоту на количество пикселей, на которое собираемся двигать по горизонтали и вертикали (оно должным быть равным, иначе исказятся пропорции картинки), далее, сдвигаем саму картинку влево и вверх на столько же пикселей, чтобы оттуда можно было двигать вправо и вниз (если мы это не сделаем, а укажем количество пикселей на hover, то сможем подвинуть картинку снизу вверх и справа налево):

.eff-15 img {
  min-width: 100%;
  min-height: 100%;
  height: calc(100% + 30px);
  width: calc(100% + 30px);
  transform: translate(-30px,-30px) scale(1);
  transition: all 0.15s linear 0s;
}


Теперь зададим полупрозрачный блок с иконкой, о необходимости transition для которой я подробнее рассказывала для эффекта #13:

.eff-15 .overlay {
  width: 100%;
  height: 45px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(255,255,255,0.6);
  transition: all 0.15s linear 0s;
}

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


И зададим стили для элементов .caption. Устанавливаем значение transition-timing-function, чтобы создать bounce-эффект, кроме того, смещаем их влево, за пределы блока с эффектом:

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

.eff-15 .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;
  left: 400px;
  transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s;
}

.eff-15 .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-15 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  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;
  position: relative;
  left: 400px;
  transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s;
}

.eff-15 .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;
  left: 400px;
  position: relative;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s;
}


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

Смещаем картинку и увеличиваем. Если бы нам понадобилось двигать ее влево и вверх, мы проставили бы здесь в обоих параметрах translate нужное количество пикселей, а в дефолтном значении проставили бы нулевые значения:

.eff-15:hover img {
  transform: translate(0px,0px) scale(1.1);
}


Уменьшаем подложку:

.eff-15:hover .overlay {
  transform: scaleX(0);
  transition-delay: 0.1s;
}

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


И выдвигаем на место элементы .caption:

.eff-15:hover .caption h4,
.eff-15:hover .caption p,
.eff-15:hover .caption a {
  left: 0px;
}

.eff-15:hover .caption h4 {
  transition-delay: 0.3s;
}

.eff-15:hover .caption p {
  transition-delay: 0.35s;
}

.eff-15:hover .caption a {
  transition-delay: 0.4s;
}


Эффект #16

Пример

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

<div class="effect eff-16">
  <img src="img/ef16.jpg" alt="Effect #16" />
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="triangle-set">
    <div class="triangle triangle-1"></div>
    <div class="triangle triangle-2"></div>
    <div class="triangle triangle-3"></div>
    <div class="triangle triangle-4"></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>


Стилизуем подложку с иконкой:

.eff-16 .overlay {
  width: 45px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: rgba(255,255,255,0.6);
  transition: all 0.15s linear 0s;
}

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


Стили для .triangle-set:

.eff-16 .triangle-set {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}


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

Вот общие стили для всех треугольников эффекта. Пока тут заданы только прозрачные границы:


.eff-16 .triangle {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 150px solid transparent;
  opacity: 0;
  transition: all 0.2s linear 0s;
}


Теперь добавляем стили для каждого из треугольников. Для треугольника, “направленного” вниз, задаем цветной border-top:

.eff-16 .triangle-1 {
  border-top: 150px solid rgba(255,255,255,0.6);
  top: 0px;
  left: 0px;
}


Для “направленных” вправо, вверх и влево тоже задаем border соответственно направлению:

.eff-16 .triangle-2 {
  border-right: 150px solid rgba(255,255,255,0.6);
  top: 0px;
  right: 0px;
}

.eff-16 .triangle-3 {
  border-bottom: 150px solid rgba(255,255,255,0.6);
  bottom: 0px;
  right: 0px;
}

.eff-16 .triangle-4 {
  border-left: 150px solid rgba(255,255,255,0.6);
  bottom: 0px;
  left: 0px;
}


Скрываем .caption за левым краем блока с эффектом:

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


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

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

Сначала исчезает .overlay:

.eff-16:hover .overlay {
  right: -45px;
}

.eff-16:hover .overlay .icon {
  opacity: 0;
}


Потом по одному начинают появляться треугольники:

.eff-16:hover .triangle {
  opacity: 1;
}

.eff-16:hover .triangle-1 {
  transition-delay: 0.2s;
}

.eff-16:hover .triangle-2 {
  transition-delay: 0.55s;
}

.eff-16:hover .triangle-3 {
  transition-delay: 0.4s;
}

.eff-16:hover .triangle-4 {
  transition-delay: 0.35s;
}


И, наконец, выезжает .caption:

.eff-16:hover .caption {
  left: 0px;
  transition-delay: 0.6s;
}


Эффект #17

Пример

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

<div class="effect eff-17">
  <img src="img/ef17.jpg" alt="Effect #17" />
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="triangle-set">
    <div class="triangle triangle-1"></div>
    <div class="triangle triangle-2"></div>
    <div class="triangle triangle-3"></div>
    <div class="triangle triangle-4"></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>


Стилизуем .overlay и иконку:

.eff-17 .overlay {
  width: 45px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: rgba(255,255,255,0.6);
  transition: all 0.15s linear 0s;
}

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


Стили для .triangle-set:

.eff-17 .triangle-set {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}


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

.eff-17 .triangle {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 150px solid transparent;
  opacity: 0;
  transform: rotate(-90deg);
  transition: all 0.2s linear 0s;
}


И стили для каждого треугольника:

.eff-17 .triangle-1 {
  border-top: 150px solid rgba(255,255,255,0.6);
  top: 0px;
  left: 0px;
}

.eff-17 .triangle-2 {
  border-right: 150px solid rgba(255,255,255,0.6);
  top: 0px;
  right: 0px;
}

.eff-17 .triangle-3 {
  border-bottom: 150px solid rgba(255,255,255,0.6);
  bottom: 0px;
  right: 0px;
}

.eff-17 .triangle-4 {
  border-left: 150px solid rgba(255,255,255,0.6);
  bottom: 0px;
  left: 0px;
}


Осталось скрыть .caption:

.eff-17 .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 остаются дефолтные стили.

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

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

.eff-17:hover .overlay {
  right: -45px;
}

.eff-17:hover .overlay .icon {
  opacity: 0;
}


Проявляем и разворачиваем треугольники:

.eff-17:hover .triangle {
  opacity: 1;
  transform: rotate(0deg);
}

.eff-17:hover .triangle-1 {
  transition-delay: 0.2s;
}

.eff-17:hover .triangle-2 {
  transition-delay: 0.35s;
}

.eff-17:hover .triangle-3 {
  transition-delay: 0.4s;
}

.eff-17:hover .triangle-4 {
  transition-delay: 0.55s;
}


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

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


Эффект #18

Пример

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

<div class="effect eff-18">
  <img src="img/ef18.jpg" alt="Effect #18" />
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="triangle-set">
    <div class="triangle triangle-1"></div>
    <div class="triangle triangle-2"></div>
    <div class="triangle triangle-3"></div>
    <div class="triangle triangle-4"></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>


Стилизуем подложку и иконку:

.eff-18 .overlay {
  width: 45px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: rgba(255,255,255,0.6);
  transition: all 0.15s linear 0s;
}

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


Добавляем треугольники. Подробнее о том, как создавать треугольники, я писала к эффекту #16. Сначала стили для .triangle-set:

.eff-18 .triangle-set {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}


Далее наша задача уменьшить треугольники. Scale здесь не поможет: ширина и высота блоков, все равно, равна 0px, поэтому уменьшать размер мы будем с помощью изменения ширины border:

.eff-18 .triangle {
  position: absolute;
  width: 0px;
  height: 0px;
  opacity: 0;
  border: 5px solid transparent;
  transition: opacity 0.15s linear 0s, border-width 0.35s linear 0.1s;
}


И прячем .caption вниз, за край блока с эффектом:

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


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

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

Убираем .overlay:

.eff-18:hover .overlay {
  right: -45px;
}

.eff-18:hover .overlay .icon {
  opacity: 0;
}


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

.eff-18:hover .triangle {
  opacity: 1;
  border-width: 150px;
}


И выдвигаем вверх .caption:

.eff-18:hover .caption {
  top: 0px;
  transition-delay: 0.35s
}


Эффект #19

Пример

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

<div class="effect eff-19">
  <img src="img/ef19.jpg" alt="Effect #19" />
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="triangle-set">
    <div class="triangle triangle-1"></div>
    <div class="triangle triangle-2"></div>
    <div class="triangle triangle-3"></div>
    <div class="triangle triangle-4"></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>


В первую очередь, стилизуем шестиугольник. Чтобы шестиугольник получился, его надо разобрать на три части: прямоугольник в середине и два треугольника, верхний и нижний. О том, как составлять простые равносторонние треугольники, я уже рассказывала в эффекте #16, но в данном случае нам понадобится чуть усложненный вариант. Чтобы создать равнобедренный треугольник, достаточно дать ему прозрачные border одного размера, а видимый border — другого (как мы помним, видимый border регулирует высоту треугольника):

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

.eff-19 .overlay:before {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-bottom: 25px solid rgba(255,255,255,0.6);
  position: absolute;
  top: -75px;
  left: 0px;
}

.eff-19 .overlay:after {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-top: 25px solid rgba(255,255,255,0.6);
  position: absolute;
  top: 60px;
  left: 0px;
}


И иконка:

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


Теперь применим эти знания, чтобы создать четыре треугольника, появляющихся при наведении.

Стили для .triangle-set:

.eff-19 .triangle-set {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}


Стили для треугольников. Сейчас их видимые .border равны 0px, об этом я подробнее рассказывала в эффекте #18:

.eff-19 .triangle {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 150px solid transparent;
  transition: all 0.3s linear 0s;
}

.eff-19 .triangle-1 {
  border-top: 0px solid rgba(255,255,255,0.6);
  top: 0px;
  left: 0px;
}

.eff-19 .triangle-2 {
  border-right: 0px solid rgba(255,255,255,0.6);
  top: 0px;
  right: 0px;
}

.eff-19 .triangle-3 {
  border-bottom: 0px solid rgba(255,255,255,0.6);
  bottom: 0px;
  right: 0px;
}

.eff-19 .triangle-4 {
  border-left: 0px solid rgba(255,255,255,0.6);
  bottom: 0px;
  left: 0px;
}


Прячем .caption:

.eff-19 .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 стили остаются дефолтными.

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

Прячем .overlay, он крутится и становится прозрачным. Прокручиваем его на такое количество градусов, чтобы вращение не было ни слишком быстрым, ни слишком медленным:

.eff-19:hover .overlay {
  transform: rotate(200deg);
  opacity: 0;
}

.eff-19:hover .overlay .icon {
  opacity: 0;
}


Теперь появляются треугольники:

.eff-19:hover .triangle {
  opacity: 1;
  transition-delay: 0.2s;
}

.eff-19:hover .triangle-1 {
  border-top: 30px solid rgba(255,255,255,0.7);
}

.eff-19:hover .triangle-2 {
  border-right: 30px solid rgba(255,255,255,0.7);
}

.eff-19:hover .triangle-3 {
  border-bottom: 30px solid rgba(255,255,255,0.7);
}

.eff-19:hover .triangle-4 {
  border-left: 30px solid rgba(255,255,255,0.7);
}


И .caption:

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


Эффект #20

Пример

Для создания этого эффекта дополняем дефолтную html-структуру шестиугольным блоком с иконкой и блоком с двумя элементами, которые будут появляться в правом нижнем и левом верхнем углах эффекта:

<div class="effect eff-20">
  <img src="img/ef20.jpeg" alt="Effect #20" />
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="triangle-set">
    <div class="triangle triangle-1"></div>
    <div class="triangle triangle-2"></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>


Стилизуем .overlay. Про создание шестиугольников более подробно я рассказывала в эффекте #19:

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

.eff-20 .overlay:before {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-bottom: 25px solid rgba(255,255,255,0.6);
  position: absolute;
  top: -75px;
  left: 0px;
}

.eff-20 .overlay:after {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-top: 25px solid rgba(255,255,255,0.6);
  position: absolute;
  top: 60px;
  left: 0px;
}

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


Стили для .triangle-set:

.eff-20 .triangle-set {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}


Теперь поговорим об угловых блоках. Как мы помним, чтобы создать треугольник, мы создаем блок с шириной и высотой, равными 0px, делаем все border прозрачными, кроме той, что определяет направление треугольника. Для того, чтобы создать блоки, подобные этому, необходимо сделать непрозрачными два border, а не один. Для левого верхнего элемента — левый и верхний border, для нижнего правого — нижний и правый соответственно. Кроме того, мы сдвигаем каждый блок на 100% влево и вправо за пределы блока с эффектом соответственно:

.eff-20 .triangle {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 150px solid transparent;
  transition: all 0.3s linear 0s;
}

.eff-20 .triangle-1 {
  border-top: 40px solid rgba(255,255,255,0.6);
  border-left: 40px solid rgba(255,255,255,0.6);
  top: 0px;
  left: -100%;
}

.eff-20 .triangle-2 {
  border-right: 40px solid rgba(255,255,255,0.6);
  border-bottom: 40px solid rgba(255,255,255,0.6);
  bottom: 0px;
  right: -100%;
}


Для .caption важно обозначить более сложный transition-timing-function, чтобы .caption, как бы упруго подскакивал при выезжании снизу:

.eff-20 .caption {
  position: absolute;
  top: 100%;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s;
}


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

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

Закручиваем .overlay, более подробно о выборе оптимального количества градусов, я рассказывала в эффекте #19:

.eff-20:hover .overlay {
  transform: rotate(200deg);
  opacity: 0;
}

.eff-20:hover .overlay .icon {
  opacity: 0;
}


Выдвигаем блоки в углы:

.eff-20:hover .triangle {
  transition-delay: 0.2s;
}

.eff-20:hover .triangle-1 {
  left: 0px;
}

.eff-20:hover .triangle-2 {
  right: 0px;
}


И выдвигаем .caption снизу:

.eff-20:hover .caption {
  top: 0px;
  transition-delay: 0.5s;
}


Эффект #21

Пример

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

<div class="effect eff-21">
  <img src="img/ef21.jpg" alt="Effect #21" />
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="triangle"></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>


Стилизуем .overlay. Про создание шестиугольников более подробно я рассказывала в эффекте #19:

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

.eff-21 .overlay:before {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-bottom: 25px solid rgba(255,255,255,0.6);
  position: absolute;
  top: -75px;
  left: 0px;
}

.eff-21 .overlay:after {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-top: 25px solid rgba(255,255,255,0.6);
  position: absolute;
  top: 60px;
  left: 0px;
}

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


Стилизуем .triangle. В отличие от треугольников, о которых я рассказывала в эффекте #18, и для которых нужно, чтобы только один border был видимым, в отличие от угловых элементов из эффекта #20, строящегося на двух видимых border, этот элемент строится на трех. С помощью значения border-left мы можем контролировать размер треугольной выемки по левому краю. Прямо сейчас мы выставляем слишком большое значение border-left, и потому никакой выемки нет:

.eff-21 .triangle {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 150px solid transparent;
  border-top: 150px solid rgba(255,255,255,0.6);
  border-left: 500px solid rgba(255,255,255,0.6);
  border-bottom: 150px solid rgba(255,255,255,0.6);
  top: 0px;
  left: 0px;
  opacity: 0;
  transition: all 0.3s linear 0s;
}


Прячем .caption за левый край экрана и устанавливаем более сложный transition-timing-function:

.eff-21 .caption {
  position: absolute;
  top: 0px;
  left: -100%;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s;
}


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

Теперь собираем эффект.

Закручиваем .overlay, более подробно о выборе оптимального количества градусов, я рассказывала в эффекте #19:

.eff-21:hover .overlay {
  transform: rotate(200deg);
  opacity: 0;
}

.eff-21:hover .overlay .icon {
  opacity: 0;
}


Делаем .triangle непрозрачным и формируем у него треугольную выемку, изменяя свойство .border-left:

.eff-21:hover .triangle {
  opacity: 1;
  border-left: 100px solid rgba(255,255,255,0.6);
}


И выдвигаем .caption:

.eff-21:hover .caption {
  left: 0px;
  transition-delay: 0.3s;
}
Tags:
Hubs:
Total votes 13: ↑10 and ↓3+7
Comments0

Articles