Skip to content

Commit 741e470

Browse files
OAAK125OAAK125
committed
adding product cards animation
1 parent 5b200c8 commit 741e470

File tree

7 files changed

+240
-0
lines changed

7 files changed

+240
-0
lines changed

‎Product Cards/assets/bg-card.jpg‎

37 KB
Loading

‎Product Cards/assets/img-product1.png‎

486 KB
Loading

‎Product Cards/assets/img-product2.png‎

529 KB
Loading

‎Product Cards/assets/img-product3.png‎

568 KB
Loading

‎Product Cards/index.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>Card Hover Effect</title>
8+
</head>
9+
<body>
10+
11+
<section class="container">
12+
<div class="cardContainer">
13+
<!--Item One-->
14+
<article class="cardArticle">
15+
<img src="assets/img-product1.png" alt="T-shirt of Galaxy Girl anime" class="cardImg">
16+
17+
<div class="cardData">
18+
<h3 class="cardTitle">Galaxy Girl T-shirt</h3>
19+
<span class="cardPrice">$880.00</span>
20+
</div>
21+
22+
<img src="assets/bg-card.jpg" alt="White background with a wheat watercolor" class="cardBg">
23+
24+
<a href="#" class="cardButton">View More</a>
25+
</article>
26+
27+
<!--Item Two-->
28+
<article class="cardArticle">
29+
<img src="assets/img-product2.png" alt="T-shirt of Intuition Girl anime" class="cardImg">
30+
31+
<div class="cardData">
32+
<h3 class="cardTitle">Intuition Girl T-shirt</h3>
33+
<span class="cardPrice">$740.00</span>
34+
</div>
35+
36+
<img src="assets/bg-card.jpg" alt="White background with a wheat watercolor" class="cardBg">
37+
38+
<a href="#" class="cardButton">View More</a>
39+
</article>
40+
41+
<!--Item Three-->
42+
<article class="cardArticle">
43+
<img src="assets/img-product3.png" alt="T-shirt of Instinct Girl anime" class="cardImg">
44+
45+
<div class="cardData">
46+
<h3 class="cardTitle">Instinct Girl T-shirt</h3>
47+
<span class="cardPrice">$900.00</span>
48+
</div>
49+
50+
<img src="assets/bg-card.jpg" alt="White background with a wheat watercolor" class="cardBg">
51+
52+
<a href="#" class="cardButton">View More</a>
53+
</article>
54+
</div>
55+
</section>
56+
57+
</body>
58+
</html>

‎Product Cards/style.css‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
/*import font*/
2+
@import url('https://fonts.googleapis.com/css2?family=Bona+Nova:ital,wght@0,400;0,700;1,400&display=swap');
3+
4+
5+
/*declare variables*/
6+
:root{
7+
/*Color scheme*/
8+
--old-lace: #F8F0E0ff;
9+
--white: #FFFFFF;
10+
--black: #000000;
11+
12+
/*Typography*/
13+
--font-family: "Bona Nova", serif;
14+
-fs-normal: 0.8rem;
15+
}
16+
17+
/*responsive typography*/
18+
@media screen and (min-width: 1120px){
19+
:root{
20+
--fs-normal: 1rem
21+
}
22+
23+
}
24+
25+
*{
26+
box-sizing: border-box;
27+
padding: 0;
28+
margin: 0;
29+
}
30+
31+
body{
32+
font-family: var(--font-family);
33+
font-size: var(--fs-normal);
34+
background-color: var(--black);
35+
color: var(--old-lace);
36+
}
37+
38+
a{
39+
text-decoration: none;
40+
}
41+
42+
img{
43+
display: block;
44+
max-width: 100%;
45+
height: auto;
46+
}
47+
48+
/*card*/
49+
.container{
50+
display: grid;
51+
margin-inline: 1.5rem;
52+
padding-block: 5rem;
53+
}
54+
55+
.cardContainer{
56+
display: grid;
57+
grid-template-columns: repeat(auto-fit, minmax(230px, 348px));
58+
justify-content: center;
59+
gap: 2rem;
60+
}
61+
62+
.cardArticle{
63+
position: relative;
64+
background-color: var(--black);
65+
border: 2px solid var(--old-lace);
66+
padding: 3rem 1.5rem 1.5rem;
67+
display: grid;
68+
row-gap: 1rem;
69+
overflow: hidden;
70+
}
71+
72+
.cardImg{
73+
width: 200px;
74+
justify-self: center;
75+
filter: drop-shadow(0 8px 24px --black);
76+
}
77+
78+
.cardData{
79+
display: flex;
80+
justify-content: space-between;
81+
align-items: flex-end;
82+
transition: transform, 4s, opacity;
83+
}
84+
85+
.cardTitle{
86+
font-size: var(--fs-normal);
87+
font-weight: 400;
88+
}
89+
90+
.cardBg{
91+
position: absolute;
92+
top: 0;
93+
left: 0;
94+
width: 100%;
95+
height: 100%;
96+
object-fit: cover;
97+
object-position: center;
98+
transform: scale(1, 3);
99+
z-index: -1;
100+
transition: transform 4s;
101+
}
102+
103+
.cardButton{
104+
background-color: var(--black);
105+
padding: 0.75rem 1rem;
106+
color: var(--old-lace);
107+
display: flex;
108+
align-items: center;
109+
column-gap: 0.5rem;
110+
justify-self: center;
111+
box-shadow: 0 8px 24px --black;
112+
position: absolute;
113+
bottom: -1.5rem;
114+
opacity: 0;
115+
pointer-events: none;
116+
transition: transform 0.4s, opacity 0.4s;
117+
}
118+
119+
.cardButton:hover{
120+
border: 2px solid var(--black);
121+
color: var(--black);
122+
background-color: var(--old-lace);
123+
}
124+
125+
.cardButton i{
126+
font-size: 1.25rem;
127+
transition: transform 0.4s;
128+
}
129+
130+
.cardButton:hover i{
131+
font-size: 1.25rem;
132+
transition: transform 0.4s;
133+
}
134+
135+
/*card animation*/
136+
.cardArticle:hover .cardImg{
137+
transform: translateY(-1.5rem);
138+
}
139+
140+
.cardArticle:hover .cardData{
141+
transform: translateY(-4.5rem);
142+
opacity: 0;
143+
}
144+
145+
.cardArticle:hover{
146+
background-color: transparent;
147+
}
148+
149+
.cardArticle:hover .cardBg{
150+
transform: scale(1);
151+
}
152+
153+
.cardArticle:hover .cardButton{
154+
transform: translateY(-3.75rem);
155+
opacity: 1;
156+
pointer-events: initial;
157+
}
158+
159+
/*breakpoints*/
160+
@media screen and (max-width: 300px){
161+
.container{
162+
margin-inline: 1rem;
163+
}
164+
165+
.cardContainer{
166+
grid-template-columns: 1fr;
167+
}
168+
169+
}
170+
171+
@media screen and (min-width: 1120px){
172+
.container{
173+
height: 100vh;
174+
display: grid;
175+
align-items: center;
176+
}
177+
178+
.cardImg{
179+
width: 220px;
180+
}
181+
}

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
9292
- [Parallax Scrolling](#parallax-scrolling)
9393
- [Pendulum](#pendulum)
9494
- [Playing Card Animation](#playing-card-animation)
95+
- [Product Cards](#product-cards)
9596
- [Profile Cards](#profilecards)
9697
- [Radial Color Pulsar](#RadialPulsar)
9798
- [Responsive Counter Showing # of Items That Didn't Fit Screen](#responsive-counter-showing--of-items-that-didnt-fit-screen)

0 commit comments

Comments
 (0)