Card by MuhammadHasann
#e8e8e8
1.card { 2 --white: hsl(0, 0%, 83%); 3 --black: hsl(240, 15%, 9%); 4 --stone-300: hsl(24, 6%, 83%); 5 --pink-500: hsl(299, 100%, 83%); 6 7 cursor: pointer; 8 9 position: relative; 10 11 display: flex; 12 flex-direction: column; 13 align-items: center; 14} 15 16.sub-card { 17 display: flex; 18 align-items: center; 19 20 padding: 0.75rem; 21 min-width: 11.5rem; 22 height: 2.25rem; 23 background-color: var(--stone-300); 24} 25.sub-card.category { 26 justify-content: space-between; 27 28 border-radius: 0.5rem 0.5rem 0rem 0rem; 29 30 transition: all 0.5s cubic-bezier(1, 0, 0, 1); 31} 32.sub-card.named { 33 justify-content: center; 34 35 border-radius: 0rem 0rem 0.5rem 0.5rem; 36 37 transition: all 0.5s cubic-bezier(1, 0, 0, 1); 38} 39 40.card:hover .sub-card.category { 41 transform: translateY(100%); 42} 43.card:hover .sub-card.named { 44 transform: translateY(-100%); 45} 46 47.sub-card .text_span { 48 font-size: 0.75rem; 49 font-weight: 600; 50 color: var(--black); 51 text-transform: capitalize; 52} 53 54.sub-card .icon_svg { 55 width: 1rem; 56 fill: var(--black); 57} 58 59.card_container { 60 overflow: hidden; 61 62 position: relative; 63 z-index: 5; 64 65 width: 17rem; 66 height: 14rem; 67 background-color: var(--pink-500); 68 69 border-radius: 0.5rem; 70} 71.card_container::before { 72 content: ""; 73 74 position: absolute; 75 z-index: 10; 76 top: 50%; 77 left: 50%; 78 transform: translate(-50%, -50%); 79 80 width: 0rem; 81 aspect-ratio: 1; 82 background-color: hsl(240, 15%, 9%, 0.2); 83 84 border-radius: 50%; 85 transform-origin: center; 86 87 transition: all 1s cubic-bezier(1, 0, 0, 1) 0.2s; 88} 89.card_container::after { 90 content: "See more"; 91 92 position: absolute; 93 z-index: 10; 94 top: 50%; 95 left: 50%; 96 transform: translate(-50%, -50%); 97 98 display: flex; 99 justify-content: center; 100 align-items: center; 101 102 padding: 0rem; 103 box-sizing: border-box; 104 width: 0rem; 105 aspect-ratio: 1; 106 background-color: hsl(240, 15%, 9%, 0.5); 107 108 font-size: 0rem; 109 font-weight: bold; 110 color: var(--white); 111 text-align: center; 112 113 border-radius: 50%; 114 transform-origin: center; 115 116 transition: all 1s cubic-bezier(1, 0, 0, 1) 0s; 117} 118 119.card:hover .card_container::before { 120 width: 22.5rem; 121 122 transition: all 1s cubic-bezier(1, 0, 0, 1) 0s; 123} 124.card:hover .card_container::after { 125 padding: 1rem; 126 width: 5rem; 127 128 font-size: 0.75rem; 129 130 transition: all 0.3s ease-in-out 0.4s; 131} 132 133.card_container .image { 134 position: absolute; 135 top: 50%; 136 left: 50%; 137 transform: translate(-50%, -50%); 138 139 width: 3rem; 140 fill: var(--black); 141} 142
417 views
417 views
MIT License