Card by Shoh2008
#212121
1@keyframes fadeInScale { 2 0% { 3 opacity: 0; 4 transform: scale(0) translateY(50%); 5 } 6 7 90% { 8 transform: scale(1.05); 9 } 10 11 100% { 12 opacity: 1; 13 transform: scale(1) translateY(0); 14 } 15} 16 17.container { 18 width: 100%; 19 height: 100%; 20 display: flex; 21 justify-content: center; 22 align-items: center; 23} 24 25.card { 26 position: relative; 27 width: 20em; 28 background-color: #292929; 29 transition: all .3s ease-in-out; 30} 31 32.card:hover { 33 box-shadow: 0 10px 20px 10px rgba(black, .2); 34} 35 36.card__link { 37 display: block; 38 padding: 1em; 39 text-decoration: none; 40} 41 42.card__icon { 43 position: absolute; 44 width: 4em; 45 height: 4em; 46 transition: all .3s ease-in-out; 47} 48 49.card:hover .card__icon { 50 opacity: 0; 51 transform: scale(0); 52} 53 54.card__media { 55 padding: 2em 0; 56} 57 58.card__media svg path { 59 opacity: 0; 60 transition: all .3s ease-in-out; 61 transform-origin: center center; 62} 63 64.card:hover svg path { 65 animation: fadeInScale .3s ease-in-out forwards; 66} 67 68.card:hover svg path:nth-child(2) { 69 animation-delay: .1s; 70} 71 72.card:hover svg path:nth-child(3) { 73 animation-delay: .2s; 74} 75 76.card__header { 77 position: relative; 78} 79 80.card__header-title { 81 margin: 0 0 .25em; 82 color: white; 83} 84 85.card__header-meta { 86 margin: 0; 87 color: #999; 88} 89 90.card__header-icon { 91 opacity: 0; 92 position: absolute; 93 right: 0; 94 top: 50%; 95 margin-top: -1em; 96 transform: translateX(-20%); 97 width: 2em; 98 height: 2em; 99 transition: all .3s ease-in-out; 100} 101 102.card:hover .card__header-icon { 103 opacity: 1; 104 transform: translateX(0); 105}
1.1K views
1.1K views
MIT License