Card by david-mohseni
#e8e8e8
1.container { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5 margin: 30px; 6} 7 8.card { 9 margin: 2%; 10 background: #DBBDBD; 11 width: 70px; 12 height: 100px; 13 box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.25); 14 border-radius: 3px; 15 transition: .2s all; 16 cursor: pointer; 17 align-items: center; 18 text-align: center; 19 font-size: 13px; 20 padding-top: 30px; 21} 22 23.card > span { 24 display: block; 25 margin: auto; 26 max-width: 40px; 27} 28 29.container:hover .card { 30 filter: blur(3px); 31 opacity: .5; 32 transform: scale(.98); 33 box-shadow: none; 34} 35 36.container:hover .card:hover { 37 transform: scale(1); 38 filter: blur(0px); 39 opacity: 1; 40 box-shadow: 0 8px 20px 0px rgba(0, 0, 0, 0.125); 41 background: #A82C2C; 42 color: white; 43}
4.1K views
4.1K views
MIT License