Card by MikeAndrewDesigner
#212121
1.card { 2 width: 240px; 3 height: 354px; 4 position: relative; 5 border-radius: 16px; 6 overflow: hidden; 7 cursor: pointer; 8 animation: name-of-animation 2s; 9} 10 11.card-img { 12 position: absolute; 13 height: 100%; 14 width: 100%; 15 background: linear-gradient(144deg,#af40ff,#5b42f3 50%,#00ddeb); 16} 17 18.card-info { 19 position: absolute; 20 width: 100%; 21 bottom: 0; 22 padding: 1.7rem; 23 display: flex; 24 align-items: flex-end; 25 justify-content: space-between; 26} 27 28.card-icon { 29 opacity: 0; 30 transform: translateX(-20%); 31 width: 2em; 32 height: 2em; 33 transition: all .3s ease-in-out; 34 position: relative; 35 left: -0.1em; 36 top: -3px; 37} 38 39.icon { 40 --size: 28px; 41 width: var(--size); 42 height: var(--size); 43 filter: invert(1); 44 margin-top: 1px; 45 margin-left: -5px; 46} 47 48.card-text p { 49 line-height: 140%; 50 white-space: nowrap; 51} 52 53.text-title { 54 font-weight: 700; 55 font-size: 2.1rem; 56 color: rgb(255, 255, 255); 57 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 58} 59 60.text-subtitle { 61 color: rgb(255, 255, 255); 62 font-weight: 500; 63 font-size: 1.2rem; 64 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 65} 66 67.card:hover .card-icon { 68 opacity: 1; 69 transform: translateX(20%); 70} 71 72@keyframes name-of-animation { 73 0% { 74 opacity: 0; 75 } 76 77 100% { 78 opacity: 1; 79 } 80}
751 views
751 views
MIT License