HFA frame hover

by Grzegorz Matyszewski

HTML

<div class="frame"></div>

SCSS

body { background: #f7f4f4; color: #232323; }

.frame {
  position: relative;
  width: 600px;
  height: 500px;
  margin: 40px;
  border-width: 1px 0 0 1px;
  border-color: currentColor;
  border-style: solid;

  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
    background: currentColor;
    width: 1px;
    height: 140px;
    transition: height 0.25s ease-out;
    will-change: height;
  }
  
  &::before {
    transform-origin: top;
    transform: rotate(45deg);
    top: 0;
    right: 0;
  }
  
  &::after {
    transform-origin: bottom;
    transform: rotate(45deg);
    bottom: 0;
  }
  
  &:hover {
    &::before { height: 100px; }
    &::after { height: 180px; }
  }
}