본문 바로가기
  • purple-whale
반응형 웹사이트/Shilla Hotel

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

by purple-whale purple-whale 2021. 1. 27.
article {
  &::before {
    content: "";
    position: absolute; top: 0; left: 0; bottom: 0; right: 0;
    background: rgba($bk, 0.2);
  }
  &:hover{
    &::before {
      display: none;
    }
  }
}

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

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

 

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

 

댓글0