1.card {
2  width: 190px;
3  height: 120px;
4  background-color: #eee;
5  text-align: center;
6  border: 10px solid #eee;
7  border-radius: 20px;
8  box-shadow: inset 5px 5px 10px #bbb, inset -5px -5px 10px #fff;
9  transition: 0.5s;
10}
11
12.card:hover {
13  height: 254px;
14}
15
16.icon {
17  width: 60px;
18  height: 60px;
19  color: red;
20  font-size: 30px;
21  background-color: #eee;
22  margin: 20px auto;
23  padding: 5px;
24  border-radius: 50%;
25  box-shadow: 8px 8px 10px #ddd, -8px -8px 10px #fff;
26}
27
28.content {
29  color: #999;
30  background-color: #eee;
31  padding: 10px;
32  margin: 5px 20px;
33  border-radius: 8px;
34  box-shadow: 8px 8px 10px #ddd, -8px -8px 10px #fff;
35  transform: translateY(-80px) scale(0);
36  transition: all 0.5s;
37}
38
39.card:hover .content {
40  transform: translateY(0) scale(1)
41}
42
43.content h3 {
44  text-shadow: 2px 2px 0px #fff;
45}