Card by Centered101

#e8e8e8

1.card {
2  width: 280px;
3  height: 280px;
4  background: white;
5  border-radius: 32px;
6  padding: 3px;
7  position: relative;
8  box-shadow: #604b4a30 0px 70px 30px -50px;
9  transition: all 0.5s ease-in-out;
10}
11
12.card .mail {
13  position: absolute;
14  right: 2rem;
15  top: 1.4rem;
16  background: transparent;
17  border: none;
18}
19
20.card .mail svg {
21  stroke: #fbb9b6;
22  stroke-width: 3px;
23}
24
25.card .mail svg:hover {
26  stroke: #f55d56;
27}
28
29.card .profile-pic {
30  position: absolute;
31  width: calc(100% - 6px);
32  height: calc(100% - 6px);
33  top: 3px;
34  left: 3px;
35  border-radius: 29px;
36  z-index: 1;
37  border: 0px solid #fbb9b6;
38  overflow: hidden;
39  transition: all 0.5s ease-in-out 0.2s, z-index 0.5s ease-in-out 0.2s;
40}
41
42.card .profile-pic img {
43  -o-object-fit: cover;
44  object-fit: cover;
45  width: 100%;
46  height: 100%;
47  -o-object-position: 0px 0px;
48  object-position: 0px 0px;
49  transition: all 0.5s ease-in-out 0s;
50}
51
52.card .profile-pic svg {
53  width: 100%;
54  height: 100%;
55  -o-object-fit: cover;
56  object-fit: cover;
57  -o-object-position: 0px 0px;
58  object-position: 0px 0px;
59  transform-origin: 45% 20%;
60  transition: all 0.5s ease-in-out 0s;
61}
62
63.card .bottom {
64  position: absolute;
65  bottom: 3px;
66  left: 3px;
67  right: 3px;
68  background: #fbb9b6;
69  top: 80%;
70  border-radius: 29px;
71  z-index: 2;
72  box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px inset;
73  overflow: hidden;
74  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
75}
76
77.card .bottom .content {
78  position: absolute;
79  bottom: 0;
80  left: 1.5rem;
81  right: 1.5rem;
82  height: 160px;
83}
84
85.card .bottom .content .name {
86  display: block;
87  font-size: 1.2rem;
88  color: white;
89  font-weight: bold;
90}
91
92.card .bottom .content .about-me {
93  display: block;
94  font-size: 0.9rem;
95  color: white;
96  margin-top: 1rem;
97}
98
99.card .bottom .bottom-bottom {
100  position: absolute;
101  bottom: 1rem;
102  left: 1.5rem;
103  right: 1.5rem;
104  display: flex;
105  align-items: center;
106  justify-content: space-between;
107}
108
109.card .bottom .bottom-bottom .social-links-container {
110  display: flex;
111  gap: 1rem;
112}
113
114.card .bottom .bottom-bottom .social-links-container svg {
115  height: 20px;
116  fill: white;
117  filter: drop-shadow(0 5px 5px rgba(165, 132, 130, 0.1333333333));
118}
119
120.card .bottom .bottom-bottom .social-links-container svg:hover {
121  fill: #f55d56;
122  transform: scale(1.2);
123}
124
125.card .bottom .bottom-bottom .button {
126  background: white;
127  color: #fbb9b6;
128  border: none;
129  border-radius: 20px;
130  font-size: 0.6rem;
131  padding: 0.4rem 0.6rem;
132  box-shadow: rgba(165, 132, 130, 0.1333333333) 0px 5px 5px 0px;
133}
134
135.card .bottom .bottom-bottom .button:hover {
136  background: #f55d56;
137  color: white;
138}
139
140.card:hover {
141  border-top-left-radius: 55px;
142}
143
144.card:hover .bottom {
145  top: 20%;
146  border-radius: 80px 29px 29px 29px;
147  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
148}
149
150.card:hover .profile-pic {
151  width: 100px;
152  height: 100px;
153  aspect-ratio: 1;
154  top: 10px;
155  left: 10px;
156  border-radius: 50%;
157  z-index: 3;
158  border: 7px solid #fbb9b6;
159  box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px;
160  transition: all 0.5s ease-in-out, z-index 0.5s ease-in-out 0.1s;
161}
162
163.card:hover .profile-pic:hover {
164  transform: scale(1.3);
165  border-radius: 0px;
166}
167
168.card:hover .profile-pic img {
169  transform: scale(2.5);
170  -o-object-position: 0px 25px;
171  object-position: 0px 25px;
172  transition: all 0.5s ease-in-out 0.5s;
173}
174
175.card:hover .profile-pic svg {
176  transform: scale(2.5);
177  transition: all 0.5s ease-in-out 0.5s;
178}
179

.card {
  width: 280px;
  height: 280px;
  background: white;
  border-radius: 32px;
  padding: 3px;
  position: relative;
  box-shadow: #604b4a30 0px 70px 30px -50px;
  transition: all 0.5s ease-in-out;
}

.card .mail {
  position: absolute;
  right: 2rem;
  top: 1.4rem;
  background: transparent;
  border: none;
}

.card .mail svg {
  stroke: #fbb9b6;
  stroke-width: 3px;
}

.card .mail svg:hover {
  stroke: #f55d56;
}

.card .profile-pic {
  position: absolute;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  top: 3px;
  left: 3px;
  border-radius: 29px;
  z-index: 1;
  border: 0px solid #fbb9b6;
  overflow: hidden;
  transition: all 0.5s ease-in-out 0.2s, z-index 0.5s ease-in-out 0.2s;
}

.card .profile-pic img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  -o-object-position: 0px 0px;
  object-position: 0px 0px;
  transition: all 0.5s ease-in-out 0s;
}

.card .profile-pic svg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 0px 0px;
  object-position: 0px 0px;
  transform-origin: 45% 20%;
  transition: all 0.5s ease-in-out 0s;
}

.card .bottom {
  position: absolute;
  bottom: 3px;
  left: 3px;
  right: 3px;
  background: #fbb9b6;
  top: 80%;
  border-radius: 29px;
  z-index: 2;
  box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px inset;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.card .bottom .content {
  position: absolute;
  bottom: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 160px;
}

.card .bottom .content .name {
  display: block;
  font-size: 1.2rem;
  color: white;
  font-weight: bold;
}

.card .bottom .content .about-me {
  display: block;
  font-size: 0.9rem;
  color: white;
  margin-top: 1rem;
}

.card .bottom .bottom-bottom {
  position: absolute;
  bottom: 1rem;
  left: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card .bottom .bottom-bottom .social-links-container {
  display: flex;
  gap: 1rem;
}

.card .bottom .bottom-bottom .social-links-container svg {
  height: 20px;
  fill: white;
  filter: drop-shadow(0 5px 5px rgba(165, 132, 130, 0.1333333333));
}

.card .bottom .bottom-bottom .social-links-container svg:hover {
  fill: #f55d56;
  transform: scale(1.2);
}

.card .bottom .bottom-bottom .button {
  background: white;
  color: #fbb9b6;
  border: none;
  border-radius: 20px;
  font-size: 0.6rem;
  padding: 0.4rem 0.6rem;
  box-shadow: rgba(165, 132, 130, 0.1333333333) 0px 5px 5px 0px;
}

.card .bottom .bottom-bottom .button:hover {
  background: #f55d56;
  color: white;
}

.card:hover {
  border-top-left-radius: 55px;
}

.card:hover .bottom {
  top: 20%;
  border-radius: 80px 29px 29px 29px;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
}

.card:hover .profile-pic {
  width: 100px;
  height: 100px;
  aspect-ratio: 1;
  top: 10px;
  left: 10px;
  border-radius: 50%;
  z-index: 3;
  border: 7px solid #fbb9b6;
  box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px;
  transition: all 0.5s ease-in-out, z-index 0.5s ease-in-out 0.1s;
}

.card:hover .profile-pic:hover {
  transform: scale(1.3);
  border-radius: 0px;
}

.card:hover .profile-pic img {
  transform: scale(2.5);
  -o-object-position: 0px 25px;
  object-position: 0px 25px;
  transition: all 0.5s ease-in-out 0.5s;
}

.card:hover .profile-pic svg {
  transform: scale(2.5);
  transition: all 0.5s ease-in-out 0.5s;
}

Toggle prefixes

773 views

Variation of acard

Copy to Figma

773 views

Variation of acard

Comments

MIT License

Copyright - 2024 Smit-Prajapati (Smit Prajapati) 
Copyright - 2024 Centered101 (Centered101) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.