Card by Smit-Prajapati

1.card {
2  width: 300px;
3  height: 200px;
4  background: #243137;
5  position: relative;
6  display: grid;
7  place-content: center;
8  border-radius: 10px;
9  overflow: hidden;
10  transition: all 0.5s ease-in-out;
11}
12
13#logo-main, #logo-second {
14  height: 100%;
15}
16
17#logo-main {
18  fill: #bd9f67;
19}
20
21#logo-second {
22  padding-bottom: 10px;
23  fill: none;
24  stroke: #bd9f67;
25  stroke-width: 1px;
26}
27
28.border {
29  position: absolute;
30  inset: 0px;
31  border: 2px solid #bd9f67;
32  opacity: 0;
33  transform: rotate(10deg);
34  transition: all 0.5s ease-in-out;
35}
36
37.bottom-text {
38  position: absolute;
39  left: 50%;
40  bottom: 13px;
41  transform: translateX(-50%);
42  font-size: 6px;
43  text-transform: uppercase;
44  padding: 0px 5px 0px 8px;
45  color: #bd9f67;
46  background: #243137;
47  opacity: 0;
48  letter-spacing: 7px;
49  transition: all 0.5s ease-in-out;
50}
51
52.content {
53  transition: all 0.5s ease-in-out;
54}
55
56.content .logo {
57  height: 35px;
58  position: relative;
59  width: 33px;
60  overflow: hidden;
61  transition: all 1s ease-in-out;
62}
63
64.content .logo .logo1 {
65  height: 33px;
66  position: absolute;
67  left: 0;
68}
69
70.content .logo .logo2 {
71  height: 33px;
72  position: absolute;
73  left: 33px;
74}
75
76.content .logo .trail {
77  position: absolute;
78  right: 0;
79  height: 100%;
80  width: 100%;
81  opacity: 0;
82}
83
84.content .logo-bottom-text {
85  position: absolute;
86  left: 50%;
87  top: 50%;
88  transform: translate(-50%, -50%);
89  margin-top: 30px;
90  color: #bd9f67;
91  padding-left: 8px;
92  font-size: 11px;
93  opacity: 0;
94  letter-spacing: none;
95  transition: all 0.5s ease-in-out 0.5s;
96}
97
98.card:hover {
99  border-radius: 0;
100  transform: scale(1.1);
101}
102
103.card:hover .logo {
104  width: 134px;
105  animation: opacity 1s ease-in-out;
106}
107
108.card:hover .border {
109  inset: 15px;
110  opacity: 1;
111  transform: rotate(0);
112}
113
114.card:hover .bottom-text {
115  letter-spacing: 3px;
116  opacity: 1;
117  transform: translateX(-50%);
118}
119
120.card:hover .content .logo-bottom-text {
121  opacity: 1;
122  letter-spacing: 9.5px;
123}
124
125.card:hover .trail {
126  animation: trail 1s ease-in-out;
127}
128
129@keyframes opacity {
130  0% {
131    border-right: 1px solid transparent;
132  }
133
134  10% {
135    border-right: 1px solid #bd9f67;
136  }
137
138  80% {
139    border-right: 1px solid #bd9f67;
140  }
141
142  100% {
143    border-right: 1px solid transparent;
144  }
145}
146
147@keyframes trail {
148  0% {
149    background: linear-gradient(90deg, rgba(189, 159, 103, 0) 90%, rgb(189, 159, 103) 100%);
150    opacity: 0;
151  }
152
153  30% {
154    background: linear-gradient(90deg, rgba(189, 159, 103, 0) 70%, rgb(189, 159, 103) 100%);
155    opacity: 1;
156  }
157
158  70% {
159    background: linear-gradient(90deg, rgba(189, 159, 103, 0) 70%, rgb(189, 159, 103) 100%);
160    opacity: 1;
161  }
162
163  95% {
164    background: linear-gradient(90deg, rgba(189, 159, 103, 0) 90%, rgb(189, 159, 103) 100%);
165    opacity: 0;
166  }
167}