greeting Shiv,
There are many ways to implement the hover effect. Your implementation works, but from an accessibility standpoint, there are some notes and improvements that can make it better.
Currently, the overlay is a focusable element while the div element is not!. "You can make it, of course, but it will require adding some specific data attributes."
The more stand-fore way to improve this, is by changing the div to either a link (a) or a button. This will allow users to interact with the NFT in its active state.
For the nft__overlay class, you can take advantage of CSS pseudo-classes to implement the view icon, as it is just a decorative icon and does not need to be included in the HTML structure. I made some changes to the nft__overlay to demonstrate this:
html line 25
<!-- <img src="images/icon-view.svg" alt="View icon" class="view-icon"/> -->
css
.nft__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: hsla(178, 100%, 50%, 0);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.3s ease-in-out;
}
.nft__overlay::after {
content: url(./images/icon-view.svg);
opacity: 0;
transition: opacity 200ms ease-in-out;
}
/* Hover Interation */
.nft__overlay:hover,
.nft__overlay:focus {
background-color: hsla(178, 100%, 50%, 0.5);
}
.nft__overlay:hover::after,
.nft__overlay:focus::after {
opacity: 1;
}
These changes will make your overlay more accessible and maintain a clean HTML structure.
Hope this give you some hints , Keep up the good work!
