Submitted over 2 years ago

NFT Preview Solution

Gabriel_BC• 300

@GabrielBC2021

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I've finished another challenge but i have some troubles with the hover things, I'd love anyone help me or tell me what I'm doing wrong or what I could change on my code, I'd really appreciate it.

Community feedback

Mohamed Wagdy• 240

@MohamedWagdy7

Posted over 2 years ago

To tackle the accessibility issues. you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
		clip-path: inset(50%) !important; 
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;            
}

Marked as helpful

Gabriel_BC• 300

@GabrielBC2021

Posted over 2 years ago

@MohamedWagdy7 Thank you so much for this helpful piece of code, I really appreciate it.

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