#212121
1.card { 2 position: relative; 3 width: 300px; 4 height: 200px; 5 background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% ); 6 border-radius: 10px; 7 display: flex; 8 align-items: center; 9 justify-content: center; 10 overflow: hidden; 11 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 12} 13 14.card svg { 15 width: 48px; 16 fill: #333; 17 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 18} 19 20.card:hover { 21 transform: rotate(-5deg) scale(1.1); 22 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 23} 24 25.card__content { 26 position: absolute; 27 top: 50%; 28 left: 50%; 29 transform: translate(-50%, -50%) rotate(-45deg); 30 width: 100%; 31 height: 100%; 32 padding: 20px; 33 box-sizing: border-box; 34 background-color: #fff; 35 opacity: 0; 36 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 37} 38 39.card:hover .card__content { 40 transform: translate(-50%, -50%) rotate(0deg); 41 opacity: 1; 42} 43 44.card__title { 45 margin: 0; 46 font-size: 24px; 47 color: #333; 48 font-weight: 700; 49} 50 51.card__description { 52 margin: 10px 0 0; 53 font-size: 14px; 54 color: #777; 55 line-height: 1.4; 56} 57 58.card:hover svg { 59 scale: 0; 60 transform: rotate(-45deg); 61} 62
Comments
MIT License