Card by suleymanlaarabidev
#212121
1.card { 2 width: 190px; 3 height: 254px; 4 background: rgb(103, 225, 255); 5 transition: all 0.4s; 6 border-radius: 10px; 7 box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.705); 8 font-size: 30px; 9 font-weight: 900; 10} 11 12.card:hover { 13 border-radius: 15px; 14 cursor: pointer; 15 transform: scale(1.2); 16 box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.705); 17 background: rgb(103, 151, 255); 18} 19 20.first-content { 21 height: 100%; 22 width: 100%; 23 transition: all 0.4s; 24 display: flex; 25 justify-content: center; 26 align-items: center; 27 opacity: 1; 28 border-radius: 15px; 29} 30 31.card:hover .first-content { 32 height: 0px; 33 opacity: 0; 34} 35 36.second-content { 37 height: 0%; 38 width: 100%; 39 opacity: 0; 40 display: flex; 41 justify-content: center; 42 align-items: center; 43 border-radius: 15px; 44 transition: all 0.4s; 45 font-size: 0px; 46 transform: rotate(90deg) scale(-1); 47} 48 49.card:hover .second-content { 50 opacity: 1; 51 height: 100%; 52 font-size: 1.8rem; 53 transform: rotate(0deg); 54} 55
9.8K views
9.8K views
Variations
1 MIT License