.room__card__container{
background: rgba(255, 255, 255, 0.1);
box-shadow: 20px 20px 50x rgba(0, 0, 0, 0.5);
transition: box-shadow 1.2s;
}
.room__card__container:hover{
box-shadow: 0 120px 0 0 $neonSer inset,
0 -120px 0 0 $neonSer inset;
}
여기에서 중요한 것은 box-shadow와 transition이다.
box-shadow: 0 120px 0 0 $neoSer inset;
첫번째와 두번째는 왼쪽에서 0만큼, 위쪽에서 120px만큼 떨어지라는 뜻 3번째 0은 번짐의 정도 4번째 0은 펼쳐짐의 넓이 rgba(색상값, 투명도(alpa)) inset은 외부가 아니라 내부에서만 표현하라는 뜻!
그리고 하나의 요소에도 box-shadow를 여러개 넣을 수 있다는 점을 기억하자!