Skip to content
Submitted almost 3 years ago

nft card component solution

Mario Santoro•30
@mario-santoro89
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

Hi all, i struggle for hovering the image with the eye and found this way...but the opacity afflicts also the eye and is not as good as it should be. Any better ideas? Also i'm very new to programming and found easier to write the sizes in px, but the far i go i see is almost unused. Should i better learn to use properly em and rem? Thank you in advance ciao!

Community feedback

  • PagChompBoy•120
    @PagChomperPosted almost 3 years ago

    for the rem and em units you do not have to remember it. rem equals to 16px but if you set the font size to 62.5% in the html element in css rem equals to 10px which is way easier to remember.

    Marked as helpful
    1
  • Saran•460
    @Saran-73Posted almost 3 years ago

    Hi 👋mario:You can do that by creating a div with same image size and create(:before) pseudo element for that div give it backround color then centre the icon inside then make it position absolute to place it above the img and use the opacity and z- index property. To understand about not affecting the opacity of the icon while reducing the background opacity ,take a look at my project or the video by (coder coder) in youtube title"how to make background image transparent in Css" will help.Best of luck.

    Marked as helpful
    1

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