Submitted over 1 year ago

nft card designed using css flex concept

balavignesh111•70

@balavignesh111

Preview site View code

This is a solution for...NFT preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I find very difficult to add a mouse hover to image element. can anyone suggest a new solution to it? check my code let me know whether it is correct or not? Thanks in advance!!!

Community feedback

Vanza Setia•27,775
@vanzasetiaPosted over 1 year ago
Hi, @balavignesh111! 👋

I recommend making the overlay for the Equilibrium image with CSS using a pseudo-element and background properties to show the cyan color and eye icon.

Before that, you need to fix the HTML by:

Wrapping the image with an anchor tag: It has interactivity—a hover effect—so it should be an interactive element.

Removing the HTML markup for the overlay: You will build the overlay with CSS. You do not need extra HTML elements for the overlay.

You can see @IlnaraAckermann's solution for your reference: Frontend Mentor | Css3, HTML5, flexbox, pseudo-class and pseudo-elements coding challenge solution

Here are some more suggestions for improvements.

Do not skip heading levels: Heading levels must always be in order to give structure to a page. Replace the <h3> with <h1>. Learn more about heading elements — How-to: Accessible heading structure - The A11Y Project

Do not use pixel unit for font sizes: Use rem or em instead of px for font sizes. Never use px unit. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS

Do not change the <html> or the :root font size: It can cause huge accessibility implications for those users with different font sizes or zoom requirements. Grace Snow explains the issue clearly—Should I change the default HTML font-size to 62.5%?—and Joshua Comeau also does not recommend that approach—The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?.

I hope this helps. Happy coding! 😄
Marked as helpful
1

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord