Эта статья является логическим продолжением моей предыдущей статьи, посвященной основам 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('https://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('https://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('https://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('https://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('https://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('https://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('https://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('https://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('https://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('https://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;
}
Автор: eisenfox
