Card by Rodrypaladin
#e8e8e8
1.card { 2 width: 300px; 3 position: relative; 4 background: rgb(255, 255, 255); 5 padding: 20px; 6} 7 8.card::after { 9 z-index: -1; 10 content: ""; 11 position: absolute; 12 width: 50%; 13 height: 10px; 14 bottom: 15px; 15 right: 0; 16 box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4); 17 transform: rotate(5deg); 18 transition: all 0.1s ease-in; 19} 20 21.card::before { 22 z-index: -1; 23 content: ""; 24 position: absolute; 25 width: 50%; 26 height: 10px; 27 bottom: 15px; 28 left: 0; 29 box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4); 30 transform: rotate(-5deg); 31 transition: all 0.1s ease-in; 32} 33 34.card:hover:before, .card:hover:after { 35 box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.6); 36} 37 38.card:hover:before { 39 transform: rotate(-8deg); 40} 41 42.card:hover:after { 43 transform: rotate(8deg); 44} 45 46.card__img { 47 position: relative; 48 background: #007c0d; 49 background: linear-gradient(315deg, #68ffc0, #007c0d); 50 width: 100%; 51 height: 175px; 52} 53 54.card__span { 55 cursor: pointer; 56 font-size: 11px; 57 position: absolute; 58 background-color: white; 59 top: 10px; 60 left: 10px; 61 padding: 3px 7px; 62 box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2); 63 transition: transform 0.1s ease-in; 64 user-select: none; 65} 66 67.card__span:hover { 68 transform: translateX(5px); 69} 70 71.card-int { 72 padding: 20px 0 0 0; 73} 74 75.card-int__title { 76 font-weight: bold; 77 font-size: 1.2rem; 78 font-family: Arial, Helvetica, sans-serif; 79 margin-bottom: 10px; 80} 81 82.card-int__button { 83 cursor: pointer; 84 margin: 20px 0 0 0; 85 padding: 7px 20px; 86 width: 100%; 87 background-color: rgb(216, 255, 234); 88 border: none; 89 color: black; 90 position: relative; 91 overflow: hidden; 92 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0); 93 transition: box-shadow 0.1s ease-in; 94 user-select: none; 95} 96 97.card-int__button:active { 98 box-shadow: 0px 0px 15px rgba(0, 119, 255, 0.5); 99} 100 101.card-int__button:hover::before { 102 animation: effect_two 0.4s 1; 103} 104 105.card-int__button::before { 106 content: 'More for this article'; 107 color: white; 108 display: flex; 109 align-items: center; 110 justify-content: center; 111 position: absolute; 112 background: #007c0d; 113 background: linear-gradient(315deg, #68ffc0, #007c0d); 114 width: 100%; 115 height: 100%; 116 top: 0; 117 left: 0; 118 transform: translateX(-99%); 119 z-index: 1; 120 animation: effect_one 10s infinite; 121} 122 123.card-int__button:hover::before { 124 transform: translateX(0%); 125} 126 127.excerpt { 128 font-size: 14px; 129} 130 131@keyframes effect_one { 132 0% { 133 transform: translateX(-99%); 134 } 135 136 25% { 137 transform: translateX(-90%); 138 } 139 140 50% { 141 transform: translateX(-80%); 142 } 143 144 75% { 145 transform: translateX(-95%); 146 } 147 148 100% { 149 transform: translateX(-99%); 150 } 151} 152 153@keyframes effect_two { 154 to { 155 transform: translateX(-1%); 156 } 157 158 from { 159 transform: translateX(-99%); 160 } 161}
640 views
Variation of acard
MIT License