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.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
I learned to code a little bit simpler then last time (used more properties in main this time) and also using before, after to make the needed elements interactive.
To see how you can add code snippets, see below:
a::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: teal;
opacity: 0;
border-radius: 10px;
z-index: 1;
}
a::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: url("../images/icon-view.svg");
background-repeat: no-repeat;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-position: center;
opacity: 0;
border-radius: 10px;
z-index: 2;
}
a:hover::before {
opacity: 0.7;
}
a:hover::after {
opacity: 1;
}
I want to make more interactive things because that was kinda new to me.
- Example resource 1 - This thread helped me because it had a nice explanation about the interactive part.
- Frontend Mentor - @victorsonet
- Twitter - @GMLvictorsoN