#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 .blue { 12 background-color: #3b82f6; 13} 14 15.cards .green { 16 background-color: #22c55e; 17} 18 19.cards .card { 20 display: flex; 21 align-items: center; 22 justify-content: center; 23 flex-direction: column; 24 text-align: center; 25 height: 100px; 26 width: 250px; 27 border-radius: 10px; 28 color: white; 29 cursor: pointer; 30 transition: 400ms; 31} 32 33.cards .card p.tip { 34 font-size: 1em; 35 font-weight: 700; 36} 37 38.cards .card p.second-text { 39 font-size: .7em; 40} 41 42.cards .card:hover { 43 transform: scale(1.1, 1.1); 44} 45 46.cards:hover > .card:not(:hover) { 47 filter: blur(10px); 48 transform: scale(0.9, 0.9); 49}
Comments
Variations
2Gaurav-WebDev
171 views
MIT License