Card by Admin12121
#e8e8e8
1.product-container { 2 position: relative; 3} 4 5.card { 6 font-family: Lato, sans-serif; 7 position: relative; 8 width: 290px; 9 height: 400px; 10 background: #232323; 11 border-radius: 20px; 12 overflow: hidden; 13} 14 15.card:before { 16 content: ''; 17 position: absolute; 18 top: 0; 19 left: 0; 20 width: 100%; 21 height: 100%; 22 background: var(--product-color); 23 clip-path: circle(150px at 80% 20%); 24 transition: .5s ease-in-out; 25} 26 27.card:hover:before { 28 clip-path: circle(300px at 80% -20%); 29} 30 31.title { 32 position: relative; 33 font-weight: 600; 34 letter-spacing: 1px; 35 color: #fff; 36 margin-top: 12px; 37} 38 39.bg-title { 40 font-size: 10em; 41 font-weight: 900; 42 font-style: italic; 43 color: rgba(255,255,255,.04); 44 position: absolute; 45 max-width: 120%; 46 top: -150%; 47 transition: .6s; 48} 49 50.card:hover .bg-title { 51 transform: translateY(60%); 52} 53 54.photo { 55 position: absolute; 56 top: 50%; 57 transform: translateY(-50%); 58 z-index: 10; 59 width: 100%; 60 height: 220px; 61 transition: .5s; 62} 63 64.card:hover .photo { 65 top: 0%; 66 transform: translateY(0%); 67} 68 69.photo img { 70 position: absolute; 71 width: 220px; 72 top: 50%; 73 left: 50%; 74 transform: translate(-50%, -50%) rotate(-25deg); 75 transition: .5s; 76} 77 78.card:hover .photo img { 79 width: 260px; 80 top: 56%; 81} 82 83.content { 84 position: absolute; 85 bottom: 0; 86 width: 100%; 87 height: 100px; 88 text-align: center; 89 transition: 1s; 90 z-index: 5; 91} 92 93.card:hover .content { 94 height: 190px; 95} 96 97.feature { 98 display: flex; 99 justify-content: center; 100 align-items: center; 101 padding: 8px 20px; 102 transition: .5s; 103 visibility: hidden; 104 opacity: 0; 105} 106 107.card:hover .feature { 108 visibility: visible; 109 opacity: 1; 110 transition-delay: .5s; 111} 112 113.feature div { 114 color: #fff; 115 font-weight: 300; 116 font-size: 14px; 117 text-transform: uppercase; 118 letter-spacing: 2px; 119 margin-right: 10px; 120} 121 122.feature span { 123 min-width: 20px; 124 padding: 0 4px; 125 height: 26px; 126 text-align: center; 127 line-height: 26px; 128 font-size: 14px; 129 display: inline-block; 130 color: #111; 131 background: #fff; 132 margin: 0 5px; 133 transition: .4s; 134 border-radius: 4px; 135 cursor: pointer 136} 137 138.feature span:hover { 139 color: #000; 140 background: var(--product-color); 141} 142 143.btn-buy { 144 display: inline-block; 145 padding: 10px 20px; 146 background: #fff; 147 border: none; 148 border-radius: 4px; 149 margin-top: 10px; 150 text-decoration: none; 151 font-weight: 600; 152 color: #111; 153 opacity: 0; 154 transform: translateY(50px); 155 transition: 0.5s; 156 cursor: pointer; 157 outline: none; 158} 159 160.card:hover .btn-buy { 161 opacity: 1; 162 transform: translateY(0px); 163 transition: 0.5s; 164 transition-delay: 0.5s; 165} 166 167.card:hover .btn-buy:hover { 168 background: var(--product-color); 169 transition-delay: 0; 170 transition: 0.05s; 171} 172 173.product-1 { 174 --product-color: #EB6CA4; 175} 176 177.size span { 178 cursor: pointer; 179 z-index: 50; 180} 181 182.feature .tt:hover { 183 background: #038dff; 184} 185 186.feature .ttt:hover { 187 background: #09ff0d; 188}
1.2K views
1.2K views
MIT License