Your design looks really good and well done on getting the hover effect to work - it's tricky.
Box-shadow is hard to make it look good. This mdn resource explains really well what all the values mean.
Marked as helpful
@darryncodes you know, I saw that (the box-shadow generator) in a YouTube video, and I was going to try to use one but I didn't quite know how to get the desired effect for the project... so I ended up hand-coding it for my own, funny right? You'd think it would be the other way around.
@stevednick if you can figure out the generator thing... it would probably be easier. But, if you want to learn to do it by hand, I used the resource @darryncodes mentioned above and w3school to figure it out. Its just multiple box-shadows stacked on top of each other and shifted along the X and Y axis while lowering the opacity value at each layer.
It helps to use rgba or hsl for it since they take that 4th opacity value.