본 게시글은 코딩웍스 포트폴리오 실전 퍼블리싱 동영상을 참고하여 포스팅하였습니다.
구조는 아래와 같다.
보통 쇼핑몰에서 상품리스트에 마우스 hover 했을 때 상품의 상세설명이 나오는 경우가 많다.
See the Pen hover dimmed by limhaneul2244 (@limhaneul2244) on CodePen.
1번 이미지와 2번 caption이 겹쳐지게 만들자.
맨처음에는 상세설명란이 보이지 않아야 하므로 opacity값이 0이었다가 hover가 되면 1이 되어야 하므로
caption의 opacity는 0 지정. 배경색에 알파값을 지정해 약간 투명해보이게 해준다.
반응형
SMALL
'MarkUp > CSS' 카테고리의 다른 글
| [CSS]hover했을 때 위아래로 분리되는 navigation (0) | 2021.12.21 |
|---|---|
| [CSS] after를 이용해 말풍선 모양(tool tip) 만들기 (0) | 2021.12.21 |
| [CSS] hover를 이용한 drop down nav 만들기 (0) | 2021.12.21 |
| [CSS] 키프레임 애니메이션 활용한 예제 (0) | 2021.12.20 |
| [CSS] calc에 대해 알아보자 (0) | 2021.12.14 |