오버시 코너 그림자 효과

Corner shadow with hover animation

이번 포스팅에서는 hover 시에 코너의 그림자 효과에 대해 소개합니다.

그리고 CSS 전처리기인 LESS 타입도 첨부합니다.

Corner shadow

See the Pen 오버시 코너 그림자 효과 by jaeheekim (@jaehee) on CodePen.

LESS

less

* {
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

body {
  background: #fff;
  font-family: arial, helvetica, sans-serif;
  .polaroid {
    background: #f3f3f3;
    border: 1px solid #dedede;
    margin: 50px auto;
    width: 216px;
    height: 214px;
    box-shadow: 0px 0px 1px 0 rgba(0, 0, 0, 0.2);
    position: relative;
    padding: 10px 10px;
    box-sizing: border-box;
    cursor: pointer;
    &:after {
      bottom: 4px;
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
      right: 4px;
      transform: skew(2deg, 2deg);
      position: absolute;
      z-index: -1;
      transition: all 0.4s ease;
      content: "";
      height: 200px;
      width: 90%;
    }
    &:hover:after {
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    }
    img {
      display: block;
      width: 194px;
      height: 139px;
    }
    h5 {
      color: #7ac143;
      font-size: 24px;
      margin-top: 4px;
    }
    p {
      font-size: 14px;
      color: #3f4543;
    }
  }
}

Jaehee's e-room