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
- HTML5
- CSS custom properties
- Bootstrap V4.6.1
I have learnt how to add overlay to images on hover.
<div class="container d-flex p-0">
<img src="images/image-equilibrium.jpg" class="card-img-top" alt="Equilibrium Image">
<div class="overlay"></div>
<img src="images/icon-view.svg" class="overlay-img img-fluid" alt="view icon overlay">
</div>
.container .overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--cyan);
opacity: 0;
transition: 1s ease;
}
.container .overlay-img{
position: absolute;
display: none;
}
.container:hover .overlay{
opacity: 0.5;
}
.container:hover .overlay-img{
display: block;
}
- How TO - Image Hover Overlay - This helped on how to add overlay on image.