Resonsive + Interactive NTF preview card

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

After some thinking and research, I finally made this card interactive. The image:hover event took up the majority of the time, so I'm happy I was able to make it work!

I stacked the image and the image_overlay on top of each other by using JavaScript, but I think I might try stacking them with this thing called CSS Grid next time.

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

• I struggled with styling the two shadows under this card, but after spending some time trying and reading documentation, I managed to make it turn out pretty nice.

• When making elements the same size and stacking them on top of each other, I initially tried using height, width, position: absolute, and assigning margin-top with negative values. While it worked, it wasn't responsive because I used fixed values. So, I decided to set their size and stack them using JavaScript, as CSS doesn't have a way to retrieve another element's width and height."

• I encountered problems with the hover events on the image. When I hovered over it, the overlay wouldn't show. Later, I realized the issue was with my CSS selector, I used .card__image:hover .card__img-overlay, but the correct selector was .card__image:hover + .card__img-overlay.

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

Any feedback will be welcomed <33