Card by samuelfcosta18
#212121
1section.card { 2 position: relative; 3 width: 250px; 4 height: 250px; 5 background-color: #f2f2f2; 6 border-radius: 10px; 7 display: flex; 8 align-items: center; 9 justify-content: center; 10 overflow: hidden; 11 perspective: 1000px; 12 transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 13} 14.card svg { 15 fill: #000; 16 transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); 17 border-radius: 3px; 18} 19.card:hover { 20 transform: scale(1.05); 21 box-shadow: 0 8px 16px #000000; 22 background-color: #f2f2f2; 23 color: #ffffff; 24} 25 26.card__content { 27 color: #000000; 28 position: absolute; 29 top: 0; 30 left: 0; 31 width: 100%; 32 height: 100%; 33 padding: 20px; 34 box-sizing: border-box; 35 background-color: #f2f2f2; 36 transform: rotateX(-90deg); 37 transform-origin: bottom; 38 transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); 39} 40 41.card:hover .card__content { 42 transform: rotateX(0deg); 43} 44 45.card__title { 46 margin: 0; 47 padding-left: 5px; 48 font-size: 24px; 49 color: #000000; 50 font-weight: 700; 51} 52 53.card:hover svg { 54 scale: 0; 55} 56 57.card__description { 58 margin: 10px 0 0; 59 font-size: 14px; 60 color: #000000; 61 line-height: 1.4; 62} 63/* Commands to change the shadows in dark mode 64@media (prefers-color-scheme: dark) { 65 .card:hover { 66 box-shadow: 0 8px 16px #000000; 67 } 68}*/ 69
1.1K views
Variation of acard
MIT License