Card by Praashoo7

#131417

1/* CodePen Card */
2
3.card {
4  width: 15em;
5  height: 10em;
6  background-color: #252525;
7  border-radius: 7px;
8  cursor: pointer;
9}
10
11.fl {
12  display: flex;
13  justify-content: flex-end;
14  opacity: 0;
15  transition: .2s ease-in-out;
16}
17
18.fl:hover .fullscreen {
19  scale: 1.2;
20}
21
22.fl:hover .fullscreen_svg {
23  fill: white;
24}
25
26.fullscreen {
27  width: 1.5em;
28  height: 1.5em;
29  border-radius: 5px;
30  background-color: #727890;
31  margin: 1em;
32  margin-right: 0.5em;
33  display: flex;
34  align-items: center;
35  justify-content: center;
36  transition: .2s ease-in-out;
37  box-shadow: 2px 2px 6px rgba(0,0,0,.4);
38}
39
40.fullscreen_svg {
41  width: 15px;
42  height: 15px;
43  fill: rgb(177, 176, 176);
44  transition: .2s ease-in-out;
45}
46
47.card_back {
48  position: absolute;
49  width: 15em;
50  height: 13em;
51  background-color: rgba(30, 31, 38, 0.575);
52  border-radius: 7px;
53  margin-top: -5em;
54  margin-left: 0.7em;
55  transition: .2s ease-in-out;
56  z-index: -1;
57}
58
59.main:hover .card_back {
60  margin-top: -6.25em;
61  margin-left: 0em;
62  scale: 1.1;
63  height: 15.25em;
64  cursor: pointer;
65}
66
67.main:hover .fl {
68  opacity: 1;
69  cursor: pointer;
70  margin-right: 0.5em;
71}
72
73.data {
74  display: flex;
75  flex-direction: row;
76  margin-top: 1em;
77}
78
79.img {
80  width: 2.25em;
81  height: 2.25em;
82  background-color: #252525;
83  border-radius: 5px;
84  overflow: hidden;
85}
86
87.text {
88  display: flex;
89  justify-content: center;
90  flex-direction: column;
91  margin-left: 0.5em;
92  font-family: Montserrat;
93  color: white;
94}
95
96.text_m {
97  font-weight: bold;
98  font-size: 0.9em;
99}
100
101.text_s {
102  font-size: 0.7em;
103}
104
105.btns {
106  display: flex;
107  gap: 0.5em;
108  transition: .2s ease-in-out;
109}
110
111.likes {
112  display: flex;
113  align-items: center;
114  justify-content: center;
115  width: 2.5em;
116  height: 1.4em;
117  border-radius: 4px;
118  margin-top: -0.5em;
119  opacity: 0;
120  background-color: #444857;
121  transition: .2s ease-in-out;
122}
123
124.likes_text {
125  font-family: Montserrat;
126  font-size: 0.8em;
127  margin-left: 0.25em;
128  color: white;
129}
130
131.likes_svg {
132  width: 12px;
133  height: 12px;
134  fill: white;
135}
136
137.likes:hover {
138  background-color: #5A5F73;
139  cursor: pointer;
140}
141
142.comments {
143  display: flex;
144  align-items: center;
145  justify-content: center;
146  width: 2.5em;
147  height: 1.4em;
148  border-radius: 4px;
149  margin-top: -0.5em;
150  opacity: 0;
151  background-color: #444857;
152  transition: .24s ease-in-out;
153}
154
155.comments_text {
156  font-family: Montserrat;
157  font-size: 0.8em;
158  margin-left: 0.25em;
159  color: white;
160}
161
162.comments_svg {
163  width: 12px;
164  height: 12px;
165  fill: white;
166}
167
168.comments:hover {
169  background-color: #5A5F73;
170  cursor: pointer;
171}
172
173.views {
174  display: flex;
175  align-items: center;
176  justify-content: center;
177  width: 3em;
178  height: 1.4em;
179  border-radius: 4px;
180  margin-top: -0.5em;
181  opacity: 0;
182  background-color: #444857;
183  transition: .28s ease-in-out;
184}
185
186.views_text {
187  font-family: Montserrat;
188  font-size: 0.8em;
189  margin-left: 0.25em;
190  color: white;
191}
192
193.views_svg {
194  width: 12px;
195  height: 12px;
196  fill: white;
197}
198
199.views:hover {
200  background-color: #5A5F73;
201  cursor: pointer;
202}
203
204.main:hover .likes {
205  margin-top: 0.5em;
206  opacity: 1;
207}
208
209.main:hover .comments {
210  margin-top: 0.5em;
211  opacity: 1;
212}
213
214.main:hover .views {
215  margin-top: 0.5em;
216  opacity: 1;
217}
218
219
220
221/* The Main Switch */
222
223.card_content {
224  display: flex;
225  align-items: center;
226  justify-content: center;
227}
228
229/* The switch - the box around the slider */
230.switch_738 {
231  font-size: 13px;
232  position: relative;
233  display: inline-block;
234  width: 1.2em;
235  height: 3.3em;
236}
237
238/* Hide default HTML checkbox */
239.switch_738 .chk_738 {
240  opacity: 0;
241  width: 0;
242  height: 0;
243}
244
245/* The slider */
246.slider_738 {
247  position: absolute;
248  cursor: pointer;
249  top: 0;
250  left: 0;
251  right: 0;
252  bottom: 0;
253  background-color: #ccc;
254  transition: .4s;
255  border-radius: 5px;
256}
257
258.slider_738:before {
259  position: absolute;
260  content: "";
261  height: .5em;
262  width: 2.4em;
263  border-radius: 5px;
264  left: -0.6em;
265  top: 0.2em;
266  background-color: white;
267  box-shadow: 0 6px 7px rgba(0,0,0,0.3);
268  transition: .4s;
269}
270
271.slider_738:before, .slider_738:after {
272  content: "";
273  display: block;
274}
275
276.slider_738:after {
277  background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.15) 0) 0 50% / 50% 100%,
278		repeating-linear-gradient(90deg,rgb(255, 255, 255) 0,rgb(255, 255, 255),rgb(255, 255, 255) 20%,rgb(255, 255, 255) 20%,rgb(255, 255, 255) 40%) 0 50% / 50% 100%,
279		radial-gradient(circle at 50% 50%,rgb(255, 255, 255) 25%, transparent 26%);
280  background-repeat: no-repeat;
281  border: 0.25em solid transparent;
282  border-left: 0.4em solid #ffffff;
283  border-right: 0 solid transparent;
284  transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
285  transform: translateX(-22.5%) rotate(90deg);
286  transform-origin: 25% 50%;
287  position: relative;
288  top: 0.5em;
289  left: 0.55em;
290  width: 2em;
291  height: 1em;
292  box-sizing: border-box;
293}
294
295.chk_738:checked + .slider_738 {
296  background-color: limegreen;
297}
298
299.chk_738:focus + .slider_738 {
300  box-shadow: 0 0 1px limegreen;
301}
302
303.chk_738:checked + .slider_738:before {
304  transform: translateY(2.3em);
305}
306
307.chk_738:checked + .slider_738:after {
308  transform: rotateZ(90deg) rotateY(180deg) translateY(0.45em) translateX(-1.4em);
309}

/* CodePen Card */

.card {
  width: 15em;
  height: 10em;
  background-color: #252525;
  border-radius: 7px;
  cursor: pointer;
}

.fl {
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  transition: .2s ease-in-out;
}

.fl:hover .fullscreen {
  scale: 1.2;
}

.fl:hover .fullscreen_svg {
  fill: white;
}

.fullscreen {
  width: 1.5em;
  height: 1.5em;
  border-radius: 5px;
  background-color: #727890;
  margin: 1em;
  margin-right: 0.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s ease-in-out;
  box-shadow: 2px 2px 6px rgba(0,0,0,.4);
}

.fullscreen_svg {
  width: 15px;
  height: 15px;
  fill: rgb(177, 176, 176);
  transition: .2s ease-in-out;
}

.card_back {
  position: absolute;
  width: 15em;
  height: 13em;
  background-color: rgba(30, 31, 38, 0.575);
  border-radius: 7px;
  margin-top: -5em;
  margin-left: 0.7em;
  transition: .2s ease-in-out;
  z-index: -1;
}

.main:hover .card_back {
  margin-top: -6.25em;
  margin-left: 0em;
  scale: 1.1;
  height: 15.25em;
  cursor: pointer;
}

.main:hover .fl {
  opacity: 1;
  cursor: pointer;
  margin-right: 0.5em;
}

.data {
  display: flex;
  flex-direction: row;
  margin-top: 1em;
}

.img {
  width: 2.25em;
  height: 2.25em;
  background-color: #252525;
  border-radius: 5px;
  overflow: hidden;
}

.text {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-left: 0.5em;
  font-family: Montserrat;
  color: white;
}

.text_m {
  font-weight: bold;
  font-size: 0.9em;
}

.text_s {
  font-size: 0.7em;
}

.btns {
  display: flex;
  gap: 0.5em;
  transition: .2s ease-in-out;
}

.likes {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 1.4em;
  border-radius: 4px;
  margin-top: -0.5em;
  opacity: 0;
  background-color: #444857;
  transition: .2s ease-in-out;
}

.likes_text {
  font-family: Montserrat;
  font-size: 0.8em;
  margin-left: 0.25em;
  color: white;
}

.likes_svg {
  width: 12px;
  height: 12px;
  fill: white;
}

.likes:hover {
  background-color: #5A5F73;
  cursor: pointer;
}

.comments {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 1.4em;
  border-radius: 4px;
  margin-top: -0.5em;
  opacity: 0;
  background-color: #444857;
  transition: .24s ease-in-out;
}

.comments_text {
  font-family: Montserrat;
  font-size: 0.8em;
  margin-left: 0.25em;
  color: white;
}

.comments_svg {
  width: 12px;
  height: 12px;
  fill: white;
}

.comments:hover {
  background-color: #5A5F73;
  cursor: pointer;
}

.views {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 1.4em;
  border-radius: 4px;
  margin-top: -0.5em;
  opacity: 0;
  background-color: #444857;
  transition: .28s ease-in-out;
}

.views_text {
  font-family: Montserrat;
  font-size: 0.8em;
  margin-left: 0.25em;
  color: white;
}

.views_svg {
  width: 12px;
  height: 12px;
  fill: white;
}

.views:hover {
  background-color: #5A5F73;
  cursor: pointer;
}

.main:hover .likes {
  margin-top: 0.5em;
  opacity: 1;
}

.main:hover .comments {
  margin-top: 0.5em;
  opacity: 1;
}

.main:hover .views {
  margin-top: 0.5em;
  opacity: 1;
}



/* The Main Switch */

.card_content {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The switch - the box around the slider */
.switch_738 {
  font-size: 13px;
  position: relative;
  display: inline-block;
  width: 1.2em;
  height: 3.3em;
}

/* Hide default HTML checkbox */
.switch_738 .chk_738 {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider_738 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 5px;
}

.slider_738:before {
  position: absolute;
  content: "";
  height: .5em;
  width: 2.4em;
  border-radius: 5px;
  left: -0.6em;
  top: 0.2em;
  background-color: white;
  box-shadow: 0 6px 7px rgba(0,0,0,0.3);
  transition: .4s;
}

.slider_738:before, .slider_738:after {
  content: "";
  display: block;
}

.slider_738:after {
  background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.15) 0) 0 50% / 50% 100%,
		repeating-linear-gradient(90deg,rgb(255, 255, 255) 0,rgb(255, 255, 255),rgb(255, 255, 255) 20%,rgb(255, 255, 255) 20%,rgb(255, 255, 255) 40%) 0 50% / 50% 100%,
		radial-gradient(circle at 50% 50%,rgb(255, 255, 255) 25%, transparent 26%);
  background-repeat: no-repeat;
  border: 0.25em solid transparent;
  border-left: 0.4em solid #ffffff;
  border-right: 0 solid transparent;
  transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
  transform: translateX(-22.5%) rotate(90deg);
  transform-origin: 25% 50%;
  position: relative;
  top: 0.5em;
  left: 0.55em;
  width: 2em;
  height: 1em;
  box-sizing: border-box;
}

.chk_738:checked + .slider_738 {
  background-color: limegreen;
}

.chk_738:focus + .slider_738 {
  box-shadow: 0 0 1px limegreen;
}

.chk_738:checked + .slider_738:before {
  transform: translateY(2.3em);
}

.chk_738:checked + .slider_738:after {
  transform: rotateZ(90deg) rotateY(180deg) translateY(0.45em) translateX(-1.4em);
}

Toggle prefixes

5.4K views

Copy to Figma

5.4K views

Comments

Variations

Get code

Link to post

MIT License

Copyright - 2024 Praashoo7 (Prashant) 

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.