100일 CSS 챌린지 #13 : 유저 갤러리

문제

https://100dayscss.com/days/13/

 

User Gallery: An idea for a transition between user overview and profile page.
유저 갤러리: 유저 오버뷰와 프로필 페이지 간의 전환에 대한 아이디어입니다.

 

내 풀이

See the Pen 013 - User Gallery by dobbyjang0 (@dobbyjang0) on CodePen.

pointer-events: none;

유저 오버뷰 위에 프로필 페이지를 만드니 뒤에 있는 유저 오버뷰가 프로필 페이지에 가려 상호작용이 안 됐다. 뒷요소와 상호작용을 시켜주기 위해 프로필 페이지를 연 상태가 아닐 때는 pointer-events: none 속성을, 열 때는 본 요소와 상호작용을 해야하므로 pointer-events: auto 속성을 주었다.

 

예시 모범답안

See the Pen 013 - User Gallery by Matthias Martin (@roydigerhund) on CodePen.