Card by DellBee
This card was created for Open-Source CSS Odyssey
#212121
1.card { 2 border: 3px solid rgb(20, 228, 255); 3 height: 250px; 4 width: 300px; 5 border-radius: 20px; 6 color: white; 7 opacity: 0.5; 8 transition: all 0.2s; 9} 10 11.card:hover { 12 opacity: 2; 13 filter: drop-shadow( 0 0 10px rgb(20, 228, 255)) drop-shadow(0 0 60px rgb(20, 228, 255)); 14} 15 16.card:hover ~ .heading { 17 filter: drop-shadow( 0 0 10px rgb(248, 125, 146)) drop-shadow(0 0 60px rgb(248, 125, 146)); 18} 19 20.card:hover ~ button { 21 filter: drop-shadow( 0 0 10px rgb(248, 125, 146)) drop-shadow(0 0 60px rgb(248, 125, 146)); 22 box-shadow: inset 0 0 0 0 rgb(248, 125, 146); 23} 24 25.heading { 26 color: rgb(248, 125, 146); 27 display: flex; 28 justify-content: center; 29 font-weight: bolder; 30 position: relative; 31 top: 10px; 32} 33 34.content { 35 display: flex; 36 flex-direction: column; 37 justify-content: center; 38 align-items: center; 39 position: relative; 40 top: 20px; 41} 42 43.item { 44 display: flex; 45 margin-top: 20px; 46 cursor: pointer; 47} 48 49.item svg { 50 display: flex; 51 position: relative; 52 right: 5px; 53} 54 55.item:hover { 56 color: rgb(248, 125, 146); 57 filter: drop-shadow( 0 0 10px rgb(248, 125, 146)) drop-shadow(0 0 60px rgb(248, 125, 146)); 58} 59 60.item:hover svg { 61 right: 15px; 62 transition: all 0.3s; 63} 64 65button { 66 background-color: transparent; 67 color: white; 68 border: 2px solid rgb(248, 125, 146); 69 position: relative; 70 height: 30px; 71 top: 50px; 72 left: 50%; 73 transform: translate(-50%); 74 border-radius: 5px; 75 transition: ease-out 0.3s; 76} 77 78button:hover { 79 color: white; 80 box-shadow: inset -110px 0 0 0 rgb(248, 125, 146); 81 filter: drop-shadow( 0 0 10px rgb(248, 125, 146)) drop-shadow(0 0 60px rgb(248, 125, 146)); 82} 83 84button:active { 85 transform: scale(0.8) translate(-50%) 86} 87 88 89 90
490 views
490 views
MIT License