Card by Ali-Tahmazi99
#e8e8e8
1.card { 2 width: 200px; 3 height: 300px; 4 background: #f8f9fa; 5 position: relative; 6 box-shadow: 15px 15px 50px #adb5bd75; 7 text-align: center; 8 overflow: hidden; 9 transition: all 0.3s ease-in; 10} 11 12.card p { 13 transition: all 0.3s ease-in; 14 margin-top: 40px; 15} 16 17.card:hover { 18 cursor: pointer; 19 box-shadow: none; 20} 21 22.card:hover p { 23 transform: scale(1.5); 24 color: #f8f9fa; 25} 26 27.card::before { 28 content: ''; 29 width: 100%; 30 height: 0; 31 background: #3f72ff; 32 position: absolute; 33 left: 0; 34 bottom: 0; 35 /* Or Top */ 36 transition: 0.3s ease-in-out; 37 z-index: -1; 38} 39 40.card:hover::before { 41 height: 100%; 42}
2.1K views
2.1K views
MIT License