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: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
Note: These are just examples. Delete this note and replace the list above with your own choices
I learned to use overlay icon
To see how you can add code snippets, see below:
<picture>
<img src="./images/image-equilibrium.jpg" alt="" />
<div class="overlay">
<img class="overlay__icon" src="./images/icon-view.svg" alt="" />
</div>
</picture>
.overlay {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
opacity: 0;
transition: 0.3s ease;
background-color: var(--crl-primary-200);
}
.overlay__icon {
max-width: 40px;
max-height: 40px;
color: var(--crl-neutral-100);
}
- Frontend Mentor - @sefalathabiso