Card by eduardo-amaro-maciel
#e8e8e8
1.container { 2 margin: 0 auto; 3} 4 5.card { 6 position: relative; 7 width: 200px; 8 height: 300px; 9 margin: 0 auto; 10 background: #000; 11 border-radius: 15px; 12 box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5); 13} 14 15.face { 16 position: absolute; 17 bottom: 0; 18 left: 0; 19 width: 100%; 20 height: 100%; 21 display: flex; 22 justify-content: center; 23 align-items: center; 24} 25 26.face.back { 27 box-sizing: border-box; 28 padding: 20px; 29} 30 31.face.back b { 32 margin: 0; 33 padding: 0; 34} 35 36.face.back .desc { 37 background-color: #eee; 38 -webkit-background-clip: text; 39 -webkit-text-fill-color: transparent; 40} 41 42.face.front { 43 transition: 0.5s; 44} 45 46.face.front b { 47 margin: 0; 48 padding: 0; 49 font-size: 5.1em; 50 color: #fff; 51 transition: 0.5s; 52 text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 53 z-index: 10; 54} 55 56.card:hover .face.front { 57 height: 60px; 58} 59 60.card:hover .face.front b { 61 font-size: 2em; 62} 63 64.face.front { 65 background-color: #0cbaba; 66 border-radius: 15px; 67}
1.3K views
1.3K views
MIT License