Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 3 years ago

NFT preview card component solution

foundation
Aaron Li•90
@aaronli722
A solution to the NFT preview card component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


In this challenge, I learned:

  • Centering a svg element in a div box
  • overlaying color on an image
  • Creating a reposive square div box

The most challenging part is the Card Image with a view-icon with color ovarlay when hovering. In the first try, I divided it into three component: a div box, an image and a svg icon, but then I found it difficult to correctly center the icon on the image.

After studying different resources on the web, I simplified it: a div box with background-image and an svg icon. To easily center the svg icon on the image, I set the position of the div box to relative and the svg icon to absolute so the svg icon is positioned relative to its parent: the div box.

parent-div { position: relative; } child svg { position: absolute; }

The Card Image acted as the background image of the div box and so the div box needed to be responsive square to fit the image. I learned the use of padding-top to make it responsive square:

image-box { width: 100%; padding-top: 100%; }

As the svg icon was absolute positioned, it was not affected by the padding and can be easily centered:

svg-icon { left: 50%; top: 50%; transform: translate(-50%, -50%); }

Final Challenge was overlaying color on background image when hovering. After research, I learned that it can be done by linear-gradient with two same color-stop, which means no graident at all:

image-box:hover { background: linear-gradient(color1, color1), backgraound-image; }

All DONE!

I am new to HTML and CSS. I started learning from freecodecamp and w3school few months ago. I am not sure if the above solution is the best solution and it would be great if you may have a better suggestion.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • akhademik•420
    @akhademik
    Posted over 3 years ago

    what i've done: div: => image div::before => overlay (Color + opacity applied) div::after => icon

    before and after display -> none before and after hover display -> show

    Marked as helpful

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub