Mobile-first & CSS Flexbox | NFT preview card component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Veronica! 👋

  Regarding the overlay of the Equilibrium image, I can't see the :hover effect. I am not sure what caused it. But, I notice the invalid CSS value for the display property. Did you mean position instead of display?

  .equilibrium {
      display: relative;
  }
  

  Also, I don't think that by putting the position: relative to the img element would do something. So, I recommend refactoring this by doing the following.

  • First, we need to make the HTML right so wrap the image with an anchor tag (or button depending on what you would think will happen after the users click it).
  • Then, put the img element inside the anchor tag.
  • That's it for the HTML markup. We are going to create the overlay with pure CSS.
  • So let's add position: relative to the anchor tag.
  • After that, create a pseudo-element from the anchor tag.
  • Make the pseudo-element fill the entire image.
  • Then add the background property that will show the eye icon and the cyan overlay.
  • Position the eye icon in to the middle of the image.
  • Reduce the alpha value of the cyan color.
  • Make the overlay only visible when the user hover the link element.

  You can see my solution as an example,

  Anyway, it's great that you spent some time writing the README. One thing that I would recommend is to add the syntax highlighting to the code snippet. You can read the GitHub documentation about enabling syntax highlighting.

  That's it! Hope this helps. 😊

  Marked as helpful

  1

  ---

  

  Veronica Orozco•280

  @VLOrozcoPosted over 2 years ago

  @vanzasetia I am just now seeing this message and wish I had seen it much sooner. I appreciate your response and will be making the appropriate adjustments to make the :hover pseudo selector function properly and will look into syntax highlighting.

  Thank you for taking the time to enhance this project and support my learning! ~V

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @VLOrozco No problem! 👍

  0

  

  Veronica Orozco•280

  @VLOrozcoPosted over 2 years ago

  @vanzasetia I have updated this project (refactored & reorganize) and with inspiration from your live site, I added animation on my hover elements. 😁

  While I did not see your message early on, it was fun cleaning up my code, fixing my bugs and seeing the progress I've made through creating with Frontend Mentor designs & researching docs.

  In addition, I've added you to my README acknowledgements section. 🙂

  Many thanks, V

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @VLOrozco You are welcome, Veronica! 👍

  It's good that you are fixing issues and making some improvements. 👏

  Also, thank you for the acknowledgments. 😊 I am happy that my code can help you to get some inspiration. 😄

  Marked as helpful

  1