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: https://www.frontendmentor.io/solutions/nft-preview-card-using-flexbox-dpVLNo2BV
- Live Site URL: https://nft-preview-card-71z.pages.dev/
- CSS custom properties
- Flexbox
Through this challenge I learned how to use a ::before pseudo-element to create a custom hover state, which was something entirely new for me.
.card-img::before {
cursor: pointer;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url(/images/icon-view.svg) no-repeat center;
background-color: hsla(178, 100%, 50%, 0.5);
border-radius: 5px;
opacity: 0;
}
.card-img:hover::before {
opacity: 1;
transition: opacity .15s ease-in-out;
}
I had some trouble with the responsive design - I didn't quite know what I was doing, even though I had done some research beforehand. I still have a long way to go and a lot to study.
- LinkedIn: Cristyane Tamioso
- Frontend Mentor: @htchristie