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-componenet
- Live Site URL: https://AntonyOtero.github.io/nft-preview-card-component-main
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
While this project was small-scale and simple, I was challenged a bit by trying to display an overlay on hover. When a user hovers their cursor over the image, an overlay should appear with an icon of an eye to suggest the user can view the image.
To accomplish this effect, I created a <div>
parent element to contain three other elements. The first element is the image, the second is the overlay, and the third is the eye icon.
<div class="card_image-container">
<div class="overlay"></div>
<img src="eye.svg" alt="eye icon">
<img src="./images/image-equilibriu.jpg" alt="NFT cover image">
</div>
The effect itself is achieved by using the parent div
element's :hover
pseudo-class to change the opacity of the overlay and eye icon.
.overlay,
.icon-view {
position: absolute; /* The parent is set to position relative */
opacity: 0;
}
.overlay {
width: 302px;
height: 302px;
top: 0;
left: 0;
background: var(--color-primary);
border-radius: 8px;
}
.icon-view {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--color-white);
}
.image-container:hover .overlay {
opacity: 0.5;
}
.image-container:hover .icon-view {
opacity: 0.75;
}
I want to continue learning more about writing semantic HTML5 markup, coming up with good CSS class names, and using both Flexbox and CSS Grid for responsive layouts.
- DevDocs - DevDocs combines multiple API documentations in a fast, organized, and searchable interface.
- MDN - Resources for developers, by developers.
- Website - AntonyOtero
- Frontend Mentor - @AntonyOtero
- Twitter - @AntonyOtero