NFT Preview Card Component

Community feedback

• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @anetaanette ~

  Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

  Here are some of the tips I like to provide.

  • On smaller devices, card goes over screen, and I think max-width: 100% can solve this issue.
  • Please try BEM for naming element classes. It will help you a lot on bigger projects.
  • Section elements must have at least one heading inside.
  • About image overlay, position: absolute; will be a great help.

  https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

  Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

  Cheers ~

  Marked as helpful

  0

  ---

  

  Aneta•180

  @anetaanettePosted almost 3 years ago

  Hi @tymren608 Thanks for spending some time on my code. I will keep those things in mind. Concerning image overlay, where exactly should I add the absolute position? Thanks again

  0

  

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @anetaanette ~ You can check my code to find that part. But what I can say here is

  • Add overlay on the same level with image, and add position: relative to parent, position: absolute to overlay div.
  • Set position to fit current image size.
  • First, set opacity as 0, and after hover, set it to 1.

  This is vague steps. Cheers~

  Marked as helpful

  0
• 

  Sara GadAlMawla•50

  @SaraGadAlMawlaPosted almost 3 years ago

  Check these two sources out, they have helped me:

  1- https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_opacity 2- https://www.youtube.com/watch?v=XEhR_EfKI7o

  Good luck!

  Marked as helpful

  0
• 

  Oskar•330

  @slothmast3rPosted almost 3 years ago

  Hej Aneta! Widzę że nieźle się napracowałaś nad tym czelendżem xd i całkiem nieźle ci poszło. Widzę że już kolega Tymur ci już pomógł, więc mam nadzieje, że uda ci się dokończyć czelendż i to cię zmotywuje do jeszcze większych przygód z frontendem :D

  Jeśli potrzebujesz jeszcze jakieś pomocy to śmiało możesz pytać.

  0

  ---

  

  Aneta•180

  @anetaanettePosted almost 3 years ago

  Hej @slothmast3r . Niestety dalej nie działa :( Zrobiłam wszystko tak, jak kolega powiedział. Zerkniesz na mój kod i powiesz co jest nie tak?

  0

  

  Oskar•330

  @slothmast3rPosted almost 3 years ago

  @anetaanette Polecam poczytać trochę o pseudo-klasach W skrócie korzystasz z .container:hover {...} przez to zmieniasz styl klasy .container a nie docelowego .overlay I tak przy okazji żeby zaoszczędzić czas stylując polecam ze skorzystania z narzędzi deweloperskich w przeglądarce

  0