Nft Preview Card using HTML and CSS (and tiny bit of GIMP)

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Petri, congratulations for your solution!

  By the way you solve this problem I guess you have some graphic design background, right? When I did this same challenge was the first thing come to my mind for a quick fix, edit the Figma files hahahah

  There's a better way to do it, without have to upload two images, I'll send yo a quick tutorial about how to apply this effect:

  Overlay a image with icon: https://www.w3schools.com/howto/howto_css_image_overlay.asp

  Hope it helps, keep it up!

  Marked as helpful

  0

  ---

  

  Petri Saari•120

  @Peteksi95Posted over 2 years ago

  @correlucas Thank you very much, this is very helpful!

  1
• 

  Illyaas•700

  @Illyaas4ShowPosted over 2 years ago

  This is a very nice attempt, well done! Just a few accessibility issues...

  • Document should have one main landmark - Your page should have one and only one <main> tag to help screen readers navigate the page.You can wrap your '.card' in a main tag.

  • All page content should be contained by landmarks - You should also wrap the attribution tag in a footer tag as it acts as a footer.

  • For the overlay, I added icon image in a div and put the div as a sibling of the existing image. The overlay image is then set to position: absolute; and centered. For the background, you can use the inset: 0; to make the wrapper of the icon fit it's container perfectly.

  Hope this helps!

  Marked as helpful

  0

  ---

  

  Petri Saari•120

  @Peteksi95Posted over 2 years ago

  @Illyaas4Show Thank you, i will improve those for the future

  0

  

  Illyaas•700

  @Illyaas4ShowPosted over 2 years ago

  @Peteksi95 No problem :)

  0