3.5K views
1.card { 2 color: #1b1b1b; 3 width: 190px; 4 height: 254px; 5 position: relative; 6 outline: 6px solid #f5f5f5; 7 border-radius: 8px; 8 line-height: 150%; 9 padding: 16px; 10 background: #ff930f; 11 background-blend-mode: multiply; 12 background: linear-gradient(to top, #ff930f, #ffcc33); 13 transition: background-color 1s ease-in-out; 14 overflow: hidden; 15} 16 17.card-front { 18 bottom: 16px; 19 left: 0; 20 position: absolute; 21 width: 100%; 22 text-align: center; 23 transition: transform 1s cubic-bezier(0.785, 0.135, 0.150, 0.860); 24} 25 26.card-back { 27 transform: translateX(120%); 28 transition: transform 1s cubic-bezier(0.785, 0.135, 0.150, 0.860); 29} 30 31 32/*Text*/ 33.title { 34 font-size: 1.3rem; 35 font-weight: bold; 36} 37/*Text divider*/ 38.title::after { 39 content: ""; 40 display: block; 41 width: 50%; 42 border-radius: 50%; 43 height: 2px; 44 margin: 2px auto; 45 background-color: #1b1b1b; 46} 47 48 49/*Hover*/ 50.card:hover { 51 background-color: #1b1b1b25; 52} 53 54.card:hover .card-front { 55 transform: translateX(-100%); 56} 57 58.card:hover .card-back { 59 transform: translateX(0); 60} 61 62 63
MIT License