가상클래스로 마우스오버시 불켜지는 효과 내기

article {
  &::before {
    content: "";
    position: absolute; top: 0; left: 0; bottom: 0; right: 0;
    background: rgba($bk, 0.2);
  }
  &:hover{
    &::before {
      display: none;
    }
  }
}

article에 가상클래서 ::before를 사용하여 배경 위쪽으로 어두운 색상을 입혀줍니다.

마우스 오버시 가상클래스를 없애주면 원래이미지가 나와 불켜지는 듯한 효과를 줄 수 있습니다.

 

음식 부분을 마우스 오버 하기전

음식 부분을 마우스 오버한 모습