Frontend Mentor - NFT preview card component solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Screenshot

Links

• Solution URL: link

My process

Built with

• CSS custom properties
• Flexbox

What I learned

Adding overlay with background CSS to HTML <img> tag is overly complicated as fuck.

In order to do that you have to wrap <img> into wrapper container and put an overlay container next to <img> tag, so the hole construct looks kinda like that:

<div class="wrapper">
  <img src="<img-url>" />
  <div class="overlay"></div>
</div>