Blog Preview Card

What are you most proud of, and what would you do differently next time?

I wanted the drop shadow of the card to react to the state of the child a element (i.e.: when a user hovers and focuses on the link, the drop shadow changes as well). This was a perfect time to try out the new :has() pseudo-class, used to select the card (.blog-preview) when the child a element (.link-wrap) is interacted with.

.blog-preview:has(.link-wrap.-overlay:is(:focus, :hover, :active)) { … }

What challenges did you encounter, and how did you overcome them?

Because the illustration was a vector graphic, I opted to use an svg element to display it. However, the object-fit property, useful for cropping images, doesn't appear to work with svg elements. Thankfully, an svg attribute called preserveAspectRatio provides similar results as object-fit. This article goes into more detail about it.

What specific areas of your project would you like help with?

_