Skip to content
Submitted over 2 years ago

An NFT card done using CSS Flexbox

Dan Kant•310
@Dan-Kant
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I didn't have any hardships with elements' positions or applying hover effects. The part I'm quite unsure about though, is that I altered the eye which appears when you hover on the image. From white svg format eye I changed it to png format icon. Since I used background-image property in order to set the eye icon, I was uncertain if I could use svg with background-image. That's the thing that bothers me. I think the rest is ok.

Community feedback

  • Macdeesh•610
    @macdeeshPosted over 2 years ago

    Hello Dan Kant,

    You need to make some change in the HTML:

    1- Your <head> element is missing a required instance, so you must add a <title>.

    2- I would recommend using h1 instead of h2, your page should contain a level-one heading.

    3- Your image-equilibrium must be in your HTML because it's not a decorative element.

    4- You don't have to change the format of your SVG. Use it inside a pseudo-elements like ::before or ::after to create the overlay, example :

    .image-class::before {
  content: "";
  background: url("../icon-view.svg") center no-repeat;
  background-color: hsla(178, 100%, 50%, 0.5);
  border-radius: 5px;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: .5s ease;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

    Then use :

    .image-class:hover::before {
  opacity: 1;
}

    Also, for the other SVG icons you can use pseudo-elements, as the icons are all decorative.

    5- Think about when you use the Web. What do you expect when you see a hover effect? You know something is clickable, right? That means it's an interactive element. Every place you see a hover style, you need to include an interactive element, like an anchor tag or button. So you should wrap the Equilibrium image and the other elements with an anchor tag. That is essential to fix.

    6- Don't forget to write a good alt text to your image. Try to not use words like image or hyphenated phrases as if it's code, it is a human-readable description.

    0
    Dan Kant•310
    @Dan-KantPosted over 2 years ago

    @macdeesh Thank you for your feedback. I much appreciate your response

    0

Please log in to post a comment

Log in with GitHub

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