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-component-rKp_Cr8qhw)
- Live Site URL: (https://phenomenal-squirrel-91525f.netlify.app/)
- Plan and outline the website
- Set up the project
- Add HTML5 semantic tags
- Add CSS custom properties
- Use Flexbox for layout
- Style the website
- Add hover transition for links
- Test and refine
- Deploy the website
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS ::before Selector
- CSS Transitions
- CSS :hover Selector
- Using CSS ::before selector
.card .card-img .card-img-container .view-icon::before {
content: "";
position: absolute;
top: 0;
left: 0;
background: var(--cyan);
width: 100%;
height: 100%;
border-radius: 15px;
opacity: 0;
transition: opacity 0.5s ease;
}
- Using CSS transitions
.card .card-img .card-img-container .view-icon img {
opacity: 0;
transition: opacity 0.5s ease;
}
.card .card-img .card-img-container .view-icon:hover img {
opacity: 1;
}
- Using CSS :hover selector
.card .card-img .card-img-container .view-icon::before {
opacity: 0;
transition: opacity 0.5s ease;
}
.card .card-img .card-img-container .view-icon:hover:before {
opacity: 0.5;
}
As of the writing of this section, I have no areas that I want to continue focusing on more in future projects.
- How To Create Image Hover Overlay Effects - This helped me to know how to create image hover overlay effects.
- Frontend Mentor - @erlanggaadptr
I want to give a hat tip to W3Schools for providing guide on how to create image hover overlay effects.