Card by mohamedkhire
#e8e8e8
1.card::before { 2 border-radius: 50%; 3 width: 7rem; 4 height: 7rem; 5 top: 20%; 6} 7 8.card::before, 9.card::after { 10 content: ""; 11 background-color: #7090fa4b; 12 position: absolute; 13 filter: blur(10px); 14} 15 16.cards { 17 display: flex; 18 gap: 40px; 19} 20 21.cards .red, 22.cards .blue, 23.cards .green { 24 width: 200px; 25 height: 180px; 26 font-family: "CustomFont", Arial, Helvetica, sans-serif; 27 font-size: 24px; 28 font-weight: 600; 29 backdrop-filter: blur(30px); 30 background-color: rgba(65, 65, 65, 0.11); 31 border: 1px solid rgba(144, 161, 255, 0.171); 32} 33 34.cards .card { 35 display: flex; 36 align-items: center; 37 justify-content: center; 38 flex-direction: column; 39 border-radius: 10px; 40 color: rgb(0, 0, 0); 41 cursor: pointer; 42 transition: 400ms; 43} 44 45.cards .card p.tip { 46 font-size: 1em; 47 font-weight: 700; 48} 49 50.cards .card p.second-text { 51 font-size: 0.7em; 52} 53 54.cards .card:hover { 55 transform: scale(1.1, 1.1); 56} 57 58.cards:hover > .card:not(:hover) { 59 filter: blur(5px); 60 transform: scale(0.9, 0.9); 61} 62
822 views
822 views
MIT License