#131417
1/* CodePen Card */ 2 3.card { 4 width: 15em; 5 height: 10em; 6 background-color: #252525; 7 border-radius: 7px; 8 cursor: pointer; 9} 10 11.fl { 12 display: flex; 13 justify-content: flex-end; 14 opacity: 0; 15 transition: .2s ease-in-out; 16} 17 18.fl:hover .fullscreen { 19 scale: 1.2; 20} 21 22.fl:hover .fullscreen_svg { 23 fill: white; 24} 25 26.fullscreen { 27 width: 1.5em; 28 height: 1.5em; 29 border-radius: 5px; 30 background-color: #727890; 31 margin: 1em; 32 margin-right: 0.5em; 33 display: flex; 34 align-items: center; 35 justify-content: center; 36 transition: .2s ease-in-out; 37 box-shadow: 2px 2px 6px rgba(0,0,0,.4); 38} 39 40.fullscreen_svg { 41 width: 15px; 42 height: 15px; 43 fill: rgb(177, 176, 176); 44 transition: .2s ease-in-out; 45} 46 47.card_back { 48 position: absolute; 49 width: 15em; 50 height: 13em; 51 background-color: rgba(30, 31, 38, 0.575); 52 border-radius: 7px; 53 margin-top: -5em; 54 margin-left: 0.7em; 55 transition: .2s ease-in-out; 56 z-index: -1; 57} 58 59.main:hover .card_back { 60 margin-top: -6.25em; 61 margin-left: 0em; 62 scale: 1.1; 63 height: 15.25em; 64 cursor: pointer; 65} 66 67.main:hover .fl { 68 opacity: 1; 69 cursor: pointer; 70 margin-right: 0.5em; 71} 72 73.data { 74 display: flex; 75 flex-direction: row; 76 margin-top: 1em; 77} 78 79.img { 80 width: 2.25em; 81 height: 2.25em; 82 background-color: #252525; 83 border-radius: 5px; 84 overflow: hidden; 85} 86 87.text { 88 display: flex; 89 justify-content: center; 90 flex-direction: column; 91 margin-left: 0.5em; 92 font-family: Montserrat; 93 color: white; 94} 95 96.text_m { 97 font-weight: bold; 98 font-size: 0.9em; 99} 100 101.text_s { 102 font-size: 0.7em; 103} 104 105.btns { 106 display: flex; 107 gap: 0.5em; 108 transition: .2s ease-in-out; 109} 110 111.likes { 112 display: flex; 113 align-items: center; 114 justify-content: center; 115 width: 2.5em; 116 height: 1.4em; 117 border-radius: 4px; 118 margin-top: -0.5em; 119 opacity: 0; 120 background-color: #444857; 121 transition: .2s ease-in-out; 122} 123 124.likes_text { 125 font-family: Montserrat; 126 font-size: 0.8em; 127 margin-left: 0.25em; 128 color: white; 129} 130 131.likes_svg { 132 width: 12px; 133 height: 12px; 134 fill: white; 135} 136 137.likes:hover { 138 background-color: #5A5F73; 139 cursor: pointer; 140} 141 142.comments { 143 display: flex; 144 align-items: center; 145 justify-content: center; 146 width: 2.5em; 147 height: 1.4em; 148 border-radius: 4px; 149 margin-top: -0.5em; 150 opacity: 0; 151 background-color: #444857; 152 transition: .24s ease-in-out; 153} 154 155.comments_text { 156 font-family: Montserrat; 157 font-size: 0.8em; 158 margin-left: 0.25em; 159 color: white; 160} 161 162.comments_svg { 163 width: 12px; 164 height: 12px; 165 fill: white; 166} 167 168.comments:hover { 169 background-color: #5A5F73; 170 cursor: pointer; 171} 172 173.views { 174 display: flex; 175 align-items: center; 176 justify-content: center; 177 width: 3em; 178 height: 1.4em; 179 border-radius: 4px; 180 margin-top: -0.5em; 181 opacity: 0; 182 background-color: #444857; 183 transition: .28s ease-in-out; 184} 185 186.views_text { 187 font-family: Montserrat; 188 font-size: 0.8em; 189 margin-left: 0.25em; 190 color: white; 191} 192 193.views_svg { 194 width: 12px; 195 height: 12px; 196 fill: white; 197} 198 199.views:hover { 200 background-color: #5A5F73; 201 cursor: pointer; 202} 203 204.main:hover .likes { 205 margin-top: 0.5em; 206 opacity: 1; 207} 208 209.main:hover .comments { 210 margin-top: 0.5em; 211 opacity: 1; 212} 213 214.main:hover .views { 215 margin-top: 0.5em; 216 opacity: 1; 217} 218 219 220 221/* The Main Switch */ 222 223.card_content { 224 display: flex; 225 align-items: center; 226 justify-content: center; 227} 228 229/* The switch - the box around the slider */ 230.switch_738 { 231 font-size: 13px; 232 position: relative; 233 display: inline-block; 234 width: 1.2em; 235 height: 3.3em; 236} 237 238/* Hide default HTML checkbox */ 239.switch_738 .chk_738 { 240 opacity: 0; 241 width: 0; 242 height: 0; 243} 244 245/* The slider */ 246.slider_738 { 247 position: absolute; 248 cursor: pointer; 249 top: 0; 250 left: 0; 251 right: 0; 252 bottom: 0; 253 background-color: #ccc; 254 transition: .4s; 255 border-radius: 5px; 256} 257 258.slider_738:before { 259 position: absolute; 260 content: ""; 261 height: .5em; 262 width: 2.4em; 263 border-radius: 5px; 264 left: -0.6em; 265 top: 0.2em; 266 background-color: white; 267 box-shadow: 0 6px 7px rgba(0,0,0,0.3); 268 transition: .4s; 269} 270 271.slider_738:before, .slider_738:after { 272 content: ""; 273 display: block; 274} 275 276.slider_738:after { 277 background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.15) 0) 0 50% / 50% 100%, 278 repeating-linear-gradient(90deg,rgb(255, 255, 255) 0,rgb(255, 255, 255),rgb(255, 255, 255) 20%,rgb(255, 255, 255) 20%,rgb(255, 255, 255) 40%) 0 50% / 50% 100%, 279 radial-gradient(circle at 50% 50%,rgb(255, 255, 255) 25%, transparent 26%); 280 background-repeat: no-repeat; 281 border: 0.25em solid transparent; 282 border-left: 0.4em solid #ffffff; 283 border-right: 0 solid transparent; 284 transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out; 285 transform: translateX(-22.5%) rotate(90deg); 286 transform-origin: 25% 50%; 287 position: relative; 288 top: 0.5em; 289 left: 0.55em; 290 width: 2em; 291 height: 1em; 292 box-sizing: border-box; 293} 294 295.chk_738:checked + .slider_738 { 296 background-color: limegreen; 297} 298 299.chk_738:focus + .slider_738 { 300 box-shadow: 0 0 1px limegreen; 301} 302 303.chk_738:checked + .slider_738:before { 304 transform: translateY(2.3em); 305} 306 307.chk_738:checked + .slider_738:after { 308 transform: rotateZ(90deg) rotateY(180deg) translateY(0.45em) translateX(-1.4em); 309}
Comments
Variations
1 MIT License