Card by Admin12121
#e8e8e8
1.container { 2 height: 100%; 3 display: flex; 4 align-items: center; 5 justify-content: center; 6} 7 8.card { 9 position: relative; 10 display: flex; 11 justify-content: center; 12 cursor: pointer; 13 width: 22em; 14 max-width: 80%; 15 padding: 2em 0; 16 background: #FFF; 17 box-shadow: 0 0 6px 0 rgba(32, 32, 36, 0.12); 18 transition: all 0.35s ease; 19} 20 21.card::before, .card::after { 22 content: ""; 23 position: absolute; 24 top: 0; 25 left: 0; 26 width: 100%; 27 background: orange; 28 height: 4px; 29} 30 31.card::before { 32 width: 0; 33 opacity: 0; 34 transition: opacity 0 ease, width 0 ease; 35 transition-delay: 0.5s; 36} 37 38.card::after { 39 width: 100%; 40 background: white; 41 transition: width 0.5s ease; 42} 43 44.card .content { 45 width: 18em; 46 max-width: 80%; 47} 48 49.card .logo { 50 margin: 0 0 1em; 51 width: 10.625em; 52 transition: all 0.35s ease; 53} 54 55.card .h6 { 56 color: #999; 57 font-weight: 600; 58 text-transform: uppercase; 59 margin: 0; 60 letter-spacing: 2px; 61} 62 63.card .hover_content { 64 overflow: hidden; 65 max-height: 0; 66 transform: translateY(1em); 67 transition: all 0.55s ease; 68} 69 70.card .hover_content p { 71 margin: 1.5em 0 0; 72 color: #6E6E70; 73 line-height: 1.4em; 74} 75 76.card:hover { 77 width: 24em; 78 box-shadow: 0 10px 20px 0 rgba(32, 32, 36, 0.12); 79} 80 81.card:hover::before { 82 width: 100%; 83 opacity: 1; 84 transition: opacity 0.5s ease, width 0.5s ease; 85 transition-delay: 0; 86} 87 88.card:hover::after { 89 width: 0; 90 opacity: 0; 91 transition: width 0 ease; 92} 93 94.card:hover .logo { 95 margin-bottom: 0.5em; 96} 97 98.card:hover .hover_content { 99 max-height: 10em; 100 transform: none; 101}
1.4K views
1.4K views
MIT License