NFT Preview Card Component

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

HEADINGS ⚠️:

• This solution lacks usage of <h1> so it can cause severe accessibility errors due to lack of level-one headings <h1>

• Every site must want only one h1 element identifying and describing the main content of the page.

• An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.

• So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users)

• Example: <h1 class="sr-only">NFT preview card component</h1>

• If you have any questions or need further clarification, you can always check out my submission for another challenge where i used this technique and feel free to reach out to me.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Greeting CJ Cameron!! Congratulations for completing your challenge, 👏👏👏.

I have made some improvements to your code based on your feedback. Here are the updated HTML and CSS sections:

html line 18

<a href="#"id="cube-image" aria-label="cube-image">
<img  alt="cube-image" src="images/image-equilibrium.jpg">
</a>

css line 35

#cube-image {
display: flex;
border-radius: 15px;
margin-bottom: 20px;
background-color: var(--cyan);
position: relative;
justify-content: center;
align-items: center
}

#cube-image::after {
content: url(./images/icon-view.svg);
position: absolute;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 200ms ease-in-out, scale 300ms ease-in-out;
scale: 0;
}

#cube-image img {
max-width: 100%;
display: block;
opacity: 1;
border-radius: 10px;
transition: opacity 200ms ease-in-out;
}

#cube-image:hover::after {
opacity: 1;
scale: 1;
}
#cube-image img:hover {
opacity: .5;
}

I hope these changes help resolve the issue with the cyan overlay display. It's worth mentioning that there are multiple approaches to achieve a hover effect on an image, and your solution looks great! Happy coding!