Card hover with effect using html and css
preview
HTML
<div class:"card-p <hi>Card</hi> (/di.v> <div classy"card"+ <hl>Card</hi> <div classy"card-> <hi>Card</hi> </div>CSS
©import url ( 'https://fonts.googleapis.com/css2?famil=poppin&display=swap ' ) ;*{margin: 0; padding: 0;box-sizing: border-box;font-family: 'Poppins ' , sans-serif;}body{display: flex; justify-content: center;align-items: center; height: 100vh;}.card{width : 250px ; height : 250px ;margin: 2em; display: flex;justify-content: center;align-items: center;flex-direction: column;position: relative; cursor: pointer;transition: all .4s;}.card : hover( color : white; }.card : : before , .card : : after{content: ''; position: absolute;top: 0; left: 0:width: 100%; height: 100%;background: rgb(243, 243, 243);z-index: -1; border-radius: 10px;transition: all .4s;.card: :afterbackground: #F8485E;transform-origin: right bottom;transform: translate(10%, I0%) scale(0.3);border-radius: 50%; transition: all .4s;}.card: hover: :aftertransform: translate(0) scale(1);border-radi.us: 0; border-radius: 10px;.card : hover : : before {transform-origin: right bottom;transform: translate(10%, 10%) scale(0.3);border-radi.us: 50%; z-index: 1;} _____________________________________________________
Conclusion
So thats what I wanted to share with you guys 👦
And thank you for your time and support.
I wish you guys to enjoy your journey.
Also don't hesitate to share this post with your interested ones.
Gracias