nft card page

Community feedback

• 

  Saran•460

  @Saran-73Posted almost 3 years ago

  Hi 👋 you did great job trying to find your way through this challenge, congratulations.

  • enclose your container in <main> tag ,use alt="" in your <img> tag to resolve accessibility issues.

  • To create that hover effect create a div with same image size using (: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 the video by (coder coder) in youtube title "how to make background image transparent in Css" will help.

  • If u still have trouble mean feel free to take a look at my project

  • You can center the content horizontally and vertically by using min-width:100vh for the body and then usedisplay:grid; justify-items:center; align-items:center; in the body.

  Best of luck hope this helps.

  Marked as helpful

  1