This post is saved as a draft.
#e8e8e8
1/* From uiverse.io by @FrM-bot */ 2.card { 3 width: 200px; 4 height: min-content; 5 transition: all .3s; 6 position: relative; 7 border-radius: .5rem 2rem; 8 box-shadow: 0px 15px 20px -5px rgba(0, 0, 0, 0.5); 9} 10 11.card:hover { 12 transform: scale(1.03); 13} 14 15.img { 16 transition: all .3s; 17 background: #ff0084; 18 background: -webkit-linear-gradient(to right, #33001b, #ff0084); 19 background: linear-gradient(to right, #33001b, #ff0084); 20 width: 100%; 21} 22 23.img:hover { 24 transform: scale(1.3); 25} 26 27.img-container { 28 display: grid; 29 border-radius: .5rem 2rem; 30 height: 270px; 31 overflow: hidden; 32} 33 34.description { 35 position: absolute; 36 bottom: .5rem; 37 left: .5rem; 38 text-align: start; 39 padding: .5rem 1em; 40 width: 90%; 41 transition: all 0.5s ease; 42 text-overflow: ellipsis; 43 white-space: nowrap; 44 backdrop-filter: blur(.1rem); 45 background-color: rgba(0, 0, 0, 0.2); 46 border-radius: .5rem 2rem; 47} 48 49.description:hover { 50 transform: perspective(100px) translateX(7px) rotateX(3deg) rotateY(3deg) scale(1); 51 box-shadow: none; 52} 53 54.title { 55 color: aliceblue; 56}
Variation of acard
Variation of acard