Декоративные вертикальные рамки [9/31]

Курсы §24. Мастерская: декоративные эффекты. Часть 2
1

Здравствуйте. Я не совсем понимаю зачем создавать горизонтальные элементы а потом их переворачивать. Почему не создать сразу вертикальные элементы? или еще того проще сразу рамки справа и слева и применять к ним трансформации?

2

Интересно, как вы собираетесь к рамкам трансформации применять. Расскажете?

3

Хорошо. С рамками понятно. Почему в таком случае не создать сразу вертикальные элементы?

4

Можно. Только эффект при наведении немного другой получается.

  .effect-2 a::before,
   .effect-2 a::after {
    content: "";
    position: absolute;
    height: 45px;
    width: 2px;
    background-color: #ffffff;
    opacity: 0.2;
    transition: all 0.3s;
}

.effect-2 a::before {
    left: 0;
}

.effect-2 a::after {
    right: 0;
}
.effect-2 a:hover::before,
.effect-2 a:hover::after {
    opacity: 1;
}

.effect-2 a:hover::before {
    bottom: 20px;
    left: 50%;
    transform: rotate(90deg) translateX(-50%);
}

.effect-2 a:hover::after {
    top: 20px;
    right: 50%;
    transform: rotate(90deg) translateX(50%);
}

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