#e8e8e8
1.card p { 2 font-size: 17px; 3 font-weight: 400; 4 line-height: 20px; 5 color: #666; 6} 7 8.card p.small { 9 font-size: 14px; 10} 11 12.go-corner { 13 display: flex; 14 align-items: center; 15 justify-content: center; 16 position: absolute; 17 width: 32px; 18 height: 32px; 19 overflow: hidden; 20 top: 0; 21 right: 0; 22 background-color: #00838d; 23 border-radius: 0 4px 0 32px; 24} 25 26.go-arrow { 27 margin-top: -4px; 28 margin-right: -4px; 29 color: white; 30 font-family: courier, sans; 31} 32 33.card1 { 34 display: block; 35 position: relative; 36 max-width: 262px; 37 background-color: #f2f8f9; 38 border-radius: 4px; 39 padding: 32px 24px; 40 margin: 12px; 41 text-decoration: none; 42 z-index: 0; 43 overflow: hidden; 44} 45 46.card1:before { 47 content: ""; 48 position: absolute; 49 z-index: -1; 50 top: -16px; 51 right: -16px; 52 background: #00838d; 53 height: 32px; 54 width: 32px; 55 border-radius: 32px; 56 transform: scale(1); 57 transform-origin: 50% 50%; 58 transition: transform 0.25s ease-out; 59} 60 61.card1:hover:before { 62 transform: scale(21); 63} 64 65.card1:hover p { 66 transition: all 0.3s ease-out; 67 color: rgba(255, 255, 255, 0.8); 68} 69 70.card1:hover h3 { 71 transition: all 0.3s ease-out; 72 color: #fff; 73} 74 75.card2 { 76 display: block; 77 top: 0px; 78 position: relative; 79 max-width: 262px; 80 background-color: #f2f8f9; 81 border-radius: 4px; 82 padding: 32px 24px; 83 margin: 12px; 84 text-decoration: none; 85 z-index: 0; 86 overflow: hidden; 87 border: 1px solid #f2f8f9; 88} 89 90.card2:hover { 91 transition: all 0.2s ease-out; 92 box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2); 93 top: -4px; 94 border: 1px solid #ccc; 95 background-color: white; 96} 97 98.card2:before { 99 content: ""; 100 position: absolute; 101 z-index: -1; 102 top: -16px; 103 right: -16px; 104 background: #00838d; 105 height: 32px; 106 width: 32px; 107 border-radius: 32px; 108 transform: scale(2); 109 transform-origin: 50% 50%; 110 transition: transform 0.15s ease-out; 111} 112 113.card2:hover:before { 114 transform: scale(2.15); 115} 116 117.card3 { 118 display: block; 119 top: 0px; 120 position: relative; 121 max-width: 262px; 122 background-color: #f2f8f9; 123 border-radius: 4px; 124 padding: 32px 24px; 125 margin: 12px; 126 text-decoration: none; 127 overflow: hidden; 128 border: 1px solid #f2f8f9; 129} 130 131.card3 .go-corner { 132 opacity: 0.7; 133} 134 135.card3:hover { 136 border: 1px solid #00838d; 137 box-shadow: 0px 0px 999px 999px rgba(255, 255, 255, 0.5); 138 z-index: 500; 139} 140 141.card3:hover p { 142 color: #00838d; 143} 144 145.card3:hover .go-corner { 146 transition: opactiy 0.3s linear; 147 opacity: 1; 148} 149 150.card4 { 151 display: block; 152 top: 0px; 153 position: relative; 154 max-width: 262px; 155 background-color: #fff; 156 border-radius: 4px; 157 padding: 32px 24px; 158 margin: 12px; 159 text-decoration: none; 160 overflow: hidden; 161 border: 1px solid #ccc; 162} 163 164.card4 .go-corner { 165 background-color: #00838d; 166 height: 100%; 167 width: 16px; 168 padding-right: 9px; 169 border-radius: 0; 170 transform: skew(6deg); 171 margin-right: -36px; 172 align-items: start; 173 background-image: linear-gradient(-45deg, #8f479a 1%, #dc2a74 100%); 174} 175 176.card4 .go-arrow { 177 transform: skew(-6deg); 178 margin-left: -2px; 179 margin-top: 9px; 180 opacity: 0; 181} 182 183.card4:hover { 184 border: 1px solid #cd3d73; 185} 186 187.card4 h3 { 188 margin-top: 8px; 189} 190 191.card4:hover .go-corner { 192 margin-right: -12px; 193} 194 195.card4:hover .go-arrow { 196 opacity: 1; 197}
Comments
MIT License