This is a solution to the NFT preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Solution URL: GitHub
- Live Site URL: NFT Preview Card Component
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- How to add an image to an anchor tag
- How to display an icon overlay on hover/focus using the
::before
and::after
pseudo-elements and theposition: absolute
property - Use of the
transition
property for simple hover/focus animation - That we can apply multiple
box-shadow
properties
I'd like to learn more about the different CSS animations, as well as other use cases of pseudo-elements.
- [CSS box-shadow] from MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) - Has good explanation and examples of the
box-shadow
property
- Frontend Mentor - @mbdelarosa
The following threads from Discord helped explain how to structure the HTML to show the icon overlay on hover/focus