Card by gharsh11032000
#212121
1.card { 2 position: relative; 3 width: 300px; 4 height: 200px; 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 box-shadow: 0 0 0 5px #ffffff80; 13 transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); 14} 15 16.card svg { 17 width: 48px; 18 fill: #333; 19 transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); 20} 21 22.card:hover { 23 transform: scale(1.05); 24 box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2); 25} 26 27.card__content { 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 font-size: 24px; 48 color: #333; 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: #777; 60 line-height: 1.4; 61} 62
17K views
17K views
Variations
3 MIT License