Card by JohnnyCSilva

Made by

@JohnnyCSilva

Theme:

Dark

#card#crypto#ethereum

#212121

4.2K views

CSSAdd prefixes

1.card {
2  width: 195px;
3  height: 285px;
4  background: #313131;
5  border-radius: 20px;
6  ;
7  display: flex;
8  flex-direction: column;
9  align-items: center;
10  justify-content: center;
11  color: white;
12  transition: 0.2s ease-in-out;
13}
14
15.img {
16  height: 30%;
17  position: absolute;
18  transition: 0.2s ease-in-out;
19  z-index: 1;
20}
21
22.textBox {
23  opacity: 0;
24  display: flex;
25  flex-direction: column;
26  align-items: center;
27  justify-content: center;
28  gap: 15px;
29  transition: 0.2s ease-in-out;
30  z-index: 2;
31}
32
33.textBox > .text {
34  font-weight: bold;
35}
36
37.textBox > .head {
38  font-size: 20px;
39}
40
41.textBox > .price {
42  font-size: 17px;
43}
44
45.textBox > span {
46  font-size: 12px;
47  color: lightgrey;
48}
49
50.card:hover > .textBox {
51  opacity: 1;
52}
53
54.card:hover > .img {
55  height: 65%;
56  filter: blur(7px);
57  animation: anim 3s infinite;
58}
59
60@keyframes anim {
61  0% {
62    transform: translateY(0);
63  }
64
65  50% {
66    transform: translateY(-20px);
67  }
68
69  100% {
70    transform: translateY(0);
71  }
72}
73
74.card:hover {
75  transform: scale(1.04) rotate(-1deg);
76}
77
78

.card {
  width: 195px;
  height: 285px;
  background: #313131;
  border-radius: 20px;
  ;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  transition: 0.2s ease-in-out;
}

.img {
  height: 30%;
  position: absolute;
  transition: 0.2s ease-in-out;
  z-index: 1;
}

.textBox {
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  transition: 0.2s ease-in-out;
  z-index: 2;
}

.textBox > .text {
  font-weight: bold;
}

.textBox > .head {
  font-size: 20px;
}

.textBox > .price {
  font-size: 17px;
}

.textBox > span {
  font-size: 12px;
  color: lightgrey;
}

.card:hover > .textBox {
  opacity: 1;
}

.card:hover > .img {
  height: 65%;
  filter: blur(7px);
  animation: anim 3s infinite;
}

@keyframes anim {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0);
  }
}

.card:hover {
  transform: scale(1.04) rotate(-1deg);
}

HTML

1<div class="card">
2  <svg class="img" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 784.37 1277.39" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <g id="Layer_x0020_1">
4  <metadata id="CorelCorpID_0Corel-Layer"></metadata>
5  <g id="_1421394342400">
6   <g>
7    <polygon fill="#343434" fill-rule="nonzero" points="392.07,0 383.5,29.11 383.5,873.74 392.07,882.29 784.13,650.54"></polygon>
8    <polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,0 -0,650.54 392.07,882.29 392.07,472.33"></polygon>
9    <polygon fill="#3C3C3B" fill-rule="nonzero" points="392.07,956.52 387.24,962.41 387.24,1263.28 392.07,1277.38 784.37,724.89"></polygon>
10    <polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,1277.38 392.07,956.52 -0,724.89"></polygon>
11    <polygon fill="#141414" fill-rule="nonzero" points="392.07,882.29 784.13,650.54 392.07,472.33"></polygon>
12    <polygon fill="#393939" fill-rule="nonzero" points="0,650.54 392.07,882.29 392.07,472.33"></polygon>
13   </g>
14  </g>
15 </g>
16</svg>
17  <div class="textBox">
18    <p class="text head">Ethereum</p>
19    <span>Cryptocurrency</span>
20    <p class="text price">1.654,34€</p>
21  </div>
22</div>
23

<div class="card">
  <svg class="img" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 784.37 1277.39" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"></metadata>
  <g id="_1421394342400">
   <g>
    <polygon fill="#343434" fill-rule="nonzero" points="392.07,0 383.5,29.11 383.5,873.74 392.07,882.29 784.13,650.54"></polygon>
    <polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,0 -0,650.54 392.07,882.29 392.07,472.33"></polygon>
    <polygon fill="#3C3C3B" fill-rule="nonzero" points="392.07,956.52 387.24,962.41 387.24,1263.28 392.07,1277.38 784.37,724.89"></polygon>
    <polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,1277.38 392.07,956.52 -0,724.89"></polygon>
    <polygon fill="#141414" fill-rule="nonzero" points="392.07,882.29 784.13,650.54 392.07,472.33"></polygon>
    <polygon fill="#393939" fill-rule="nonzero" points="0,650.54 392.07,882.29 392.07,472.33"></polygon>
   </g>
  </g>
 </g>
</svg>
  <div class="textBox">
    <p class="text head">Ethereum</p>
    <span>Cryptocurrency</span>
    <p class="text price">1.654,34€</p>
  </div>
</div>