nft-preview-card-component _ HTML+CSS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello there, @ab2halim! 👋

  Like @obaidash99 has said to you earlier that I suggest wrapping the img element inside the anchor tag instead of using background properties. Then, once done that you can add alternative text to the image. The alternative text will work as the text content of the anchor tag.

  After that, you can make the active states using pure CSS with pseudo-elements and background properties. This way, it will prevent the HTML markup from having decorative element.

  I would not recommend specifying the width and the height for each element. The only thing that it needs to make the site responsive is a max-width on the card element. The other element would have width: 100%.

  Also, there's no need for absolute positioning. Instead, I would recommend using flexbox to align the icon with the text. In my opinion, using flexbox is a more robust solution because the content is not out of the normal flow.

  That's it! Hope this helps.

  1
• 

  Obaida Shurbaji•250

  @obaidash99Posted over 2 years ago

  Nice job you did here.

  I think it is better to put the main image inside its own tag in the index.html file, not as a background of the anchor tag.

  Make the hover effect for all elements you want by creating pseudo-elements for the photo, ::before-element as the green background and ::after-element as that eye icon. giving both the pseudo-elements and the image a ' transition: 0.3s; ' if you want a smooth effect.

  Hope it helps. Obaida

  1