Card by Bodyhc
#e8e8e8
1.cards { 2 display: flex; 3 flex-direction: column; 4 gap: 15px; 5} 6 7.cards .red { 8 background-color: #f43f5e; 9} 10 11.cards .white { 12 background-color: #f8f8f8; 13 color: black; 14} 15 16.cards .blue { 17 background-color: #3b22c5; 18} 19 20.cards .card { 21 display: flex; 22 align-items: center; 23 justify-content: center; 24 flex-direction: column; 25 text-align: center; 26 height: 200px; 27 width: 300px; 28 border-radius: 10px; 29 color: rgb(1, 1, 1); 30 cursor: pointer; 31 transition: 400ms; 32} 33 34.cards .card p.tip { 35 font-size: 1em; 36 font-weight: 700; 37} 38 39.cards .card p.second-text { 40 font-size: .7em; 41} 42 43.cards .card:hover { 44 transform: scale(1.1, 1.1); 45} 46 47.cards:hover > .card:not(:hover) { 48 filter: blur(10px); 49 transform: scale(0.9, 0.9); 50}
1.8K views
Variation of acard
MIT License