Card by akshat-patel28
#e8e8e8
1.card { 2 display: flex; 3 flex-direction: column; 4 width: 230px; 5 height: 280px; 6 max-height: 330px; 7 background-color: var(--white); 8 border-radius: 10px; 9 box-shadow: 0px 10px 12px rgba(0, 0, 0, 0.08), 10 -4px -4px 12px rgba(0, 0, 0, 0.08); 11 overflow: hidden; 12 transition: all 0.3s; 13 cursor: pointer; 14 box-sizing: border-box; 15 padding: 10px; 16} 17 18.card:hover { 19 transform: translateY(-10px); 20 box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.1), 21 -4px -4px 12px rgba(0, 0, 0, 0.08); 22} 23 24.card-image-container { 25 width: 100%; 26 height: 64%; 27 border-radius: 10px; 28 margin-bottom: 12px; 29 overflow: hidden; 30 background-color: rgb(165, 165, 165); 31 display: flex; 32 align-items: center; 33 justify-content: center; 34} 35 36.video-icon { 37 font-size: 40px; 38} 39 40.card-title { 41 margin: 0; 42 font-size: 17px; 43 font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", 44 "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 45 font-weight: 600; 46 color: #1797b8; 47 cursor: default; 48 -webkit-box-orient: vertical; 49 overflow: hidden; 50 display: -webkit-box; 51 -webkit-line-clamp: 1; 52 line-clamp: 1; 53} 54 55.card-des { 56 -webkit-box-orient: vertical; 57 overflow: hidden; 58 display: -webkit-box; 59 -webkit-line-clamp: 1; 60 line-clamp: 1; 61 margin: 0; 62 font-size: 13px; 63 font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", 64 "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 65 color: #1797b8; 66 cursor: default; 67} 68 69.card-btn { 70 font-size: 15px; 71 font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", 72 "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 73 color: #fff; 74 cursor: pointer; 75 display: flex; 76 justify-content: center; 77 align-items: center; 78 background-color: #12bde7; 79 width: 25px; 80 height: 25px; 81 max-height: 25px; 82 border-radius: 10px; 83 overflow: hidden; 84 transition: all ease-in-out 0.5s; 85 gap: 1px; 86 box-sizing: border-box; 87 padding-left: 5px; 88 margin-top: 8px; 89} 90 91.card-btn:hover { 92 box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.06); 93 width: 100%; 94 border-radius: 8px; 95 height: 30px; 96 gap: 10px; 97 padding: 0; 98} 99 100.card-btn-text { 101 opacity: 0; 102 font-size: 1px; 103 font-weight: 500; 104 transition: all ease-in-out 0.5s; 105} 106 107.card-btn:hover > .card-btn-text { 108 opacity: 1; 109 font-size: 15px; 110}
1.3K views
1.3K views
Variations
1 MIT License