Card by samuelfcosta18
#212121
1section.card { 2 position: relative; 3 width: 350px; 4 height: 200px; 5 background-color: #474dc3; 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: #333; 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: #474dc3; 23 color: #ffffff; 24} 25 26.card__content { 27 position: absolute; 28 top: 0; 29 left: 0; 30 width: 100%; 31 height: 100%; 32 padding: 20px; 33 box-sizing: border-box; 34 background-color: #474dc3; 35 transform: rotateX(-90deg); 36 transform-origin: bottom; 37 transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); 38} 39 40.card:hover .card__content { 41 transform: rotateX(0deg); 42} 43 44.card__title { 45 margin: 0; 46 padding-left: 5px; 47 font-size: 24px; 48 color: var(--white); 49 font-weight: 700; 50} 51 52.card:hover svg { 53 scale: 0; 54} 55 56.card__description { 57 margin: 10px 0 0; 58 font-size: 14px; 59 color: #ffffff; 60 line-height: 1.4; 61} 62/* Commands to change the shadows in dark mode 63@media (prefers-color-scheme: dark) { 64 .card:hover { 65 box-shadow: 0 8px 16px #000000; 66 } 67}*/ 68
945 views
Variation of acard
MIT License