nft-preview-card-component using html and css

Community feedback

• 

  Saran•460

  @Saran-73Posted almost 3 years ago

  Hi ,you can do that by creating a div with same image size create(:before) pseudo element give it backround color then centre the icon inside then make it position absolute to place it above the img and reduse the opacity and z- index property and while hovering change the opacity .Use( cursor:pointer; )property in css for the img div.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.

  Marked as helpful

  0

  ---

  

  vishwa3•250

  @vishwa3Posted almost 3 years ago

  @Saran-73 : Thanks Saran for taking the time to add a detailed comment as it helped me to fix the hover state for image-equilibrium though I have not used :before to do the same

  0
• 

  Kunal Munda•200

  @ryu-kamiskiPosted almost 3 years ago

  You are right I'm also having problems with the hover state. Also you forgot to link the required font. Other than these no issue.

  0

  ---

  

  vishwa3•250

  @vishwa3Posted almost 3 years ago

  @ryu-kamiski : thanks for the feedback , I have fixed hover for image-equilibrium , you can have a look at my solution if needed

  0