WEB animation & effect/product card
CSS card 디자인 : clip-path & hover
SeaPlus
2021. 10. 5. 12:29
[구현]
1. HTML & CSS
clip-path 와 hover effect를 적용할 카드를 마크업 하고 css로 스타일링을 한다.
2. clip-path
.container .card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #9bdc28;
clip-path: circle(160px at 80% 20%);
transition: 0.5s ease-in-out;
}
.container .card:hover:before {
clip-path: circle(310px at 80% -20%);
}요소의 모양을 clip-path를 통해 평상시는 circle(160px at 80% 20%); hover 일때는 circle(310px at 80% -20%);
로 지정한다.
편집은 아래 사이트를 통해 가능하다.
https://bennettfeely.com/clippy/
Clippy — CSS clip-path maker
About Clip Paths The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shape
bennettfeely.com
3. content: Nike
.container .card::after {
content: "Nike";
position: absolute;
top: 30%;
left: -20%;
font-size: 12em;
font-weight: 800;
font-style: italic;
color: rgba(255, 255, 255, 0.04);
}
카드 배경에 "NIKE" 라는 문구를 after 가상선택자를 통해 구현한다.
4. content hover effect
마지막으로 신발이미지, size카테고리, color카테고리 에 hover effect를 적용시킨뒤
밖으로 삐져나온 요소들은 overflow:hidden 으로 감춘다.