NFT Preview Card Component using HTML and CSS

Community feedback

• 

  Amon•2,560

  @A-amonPosted almost 3 years ago

  Hello! Great job for this. It looks very responsive too~ 😀

  • Maybe try using before/ after pseudo-elements for the eye icon 👁.

  • Also, not every image needs alt value. Depending on the use cases, it can be left as such alt="". Refer here. For example, the eye icon's alt can be leave empty. And maybe even the clock icon. 😉

  1

  ---

  

  Sara Dunlop•430

  @RiscloverPosted almost 3 years ago

  @A-amon Hi! Thank you very much for the feedback.

  I've never really used before/after pseudo-elements. I know what they are, but for some reason, I've never really learned how to use them. If you have the time, would you mind explaining to me how using that strategy works for the icon hover?

  1

  

  Amon•2,560

  @A-amonPosted almost 3 years ago

  @Risclover Hello, here is the code for the eye icon using pseudo-element 😀:

  /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  * Show eye icon when .heroimg is hovered on
  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  .heroimg:hover::after {
      content: "";
      height: 3rem;
      width: 3rem;
      display: block;
      background-image: url("images/icon-view.svg");
      background-size: contain;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
  }
  

  I usually use pseudo-elements for small decorative images like icons or for overlays 💭. Refer here to know about how screen readers treat them

  1
• 

  Suleman•750

  @legion40216Posted almost 3 years ago

  Well done...

  0

  ---

  

  Sara Dunlop•430

  @RiscloverPosted almost 3 years ago

  @legion40216 Thank you 😄

  1