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.
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.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I learn about the image hover, I had a idea how to excute but there were some issues. I went online for solutions.
To see how you can add code snippets, see below:
<div class="card-head">
<img src="./images/image-equilibrium.jpg" alt="">
<div class="icon">
<img src="./images/icon-view.svg" alt="">
</div>
</div>
.card-head>.icon {
position: absolute;
background-color: hsl(178, 100%, 50%, 60%);
width: 100%;
height: 300px;
border-radius: 10px;
top: 0%;
opacity: 0;
z-index: 1;
transition: opacity .2s ease-in-out;
}
.card-head>.icon:hover {
opacity: 1;
cursor: pointer;
}
.card-head>.icon>img {
position: absolute;
top: 48%;
left: 50%;
width: 60px;
transform: translate(-50%, -50%);
}
}
I will contiune my reasech on image hover and hsl with opactiy.
- WW3 Schools with image overlay - This helped me with figuring out the image hover issue.