#212121
1.card { 2 width: 195px; 3 height: 285px; 4 background: #313131; 5 border-radius: 20px; 6 ; 7 display: flex; 8 flex-direction: column; 9 align-items: center; 10 justify-content: center; 11 color: white; 12 transition: 0.2s ease-in-out; 13} 14 15.img { 16 height: 30%; 17 position: absolute; 18 transition: 0.2s ease-in-out; 19 z-index: 1; 20} 21 22.textBox { 23 opacity: 0; 24 display: flex; 25 flex-direction: column; 26 align-items: center; 27 justify-content: center; 28 gap: 15px; 29 transition: 0.2s ease-in-out; 30 z-index: 2; 31} 32 33.textBox > .text { 34 font-weight: bold; 35} 36 37.textBox > .head { 38 font-size: 20px; 39} 40 41.textBox > .price { 42 font-size: 17px; 43} 44 45.textBox > span { 46 font-size: 12px; 47 color: lightgrey; 48} 49 50.card:hover > .textBox { 51 opacity: 1; 52} 53 54.card:hover > .img { 55 height: 65%; 56 filter: blur(7px); 57 animation: anim 3s infinite; 58} 59 60@keyframes anim { 61 0% { 62 transform: translateY(0); 63 } 64 65 50% { 66 transform: translateY(-20px); 67 } 68 69 100% { 70 transform: translateY(0); 71 } 72} 73 74.card:hover { 75 transform: scale(1.04) rotate(-1deg); 76} 77 78
12K views
12K views
Comments
MIT License