NFT preview card

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Mohieb, great job here first of all, and I think the component looks pretty close to the design!

  About your question, you can simply wrap the a tag around the image div. It's good that you considered how this would all be implemented in a real-world scenario, and I think there could be various possibilities, like it could be a link that brings the user to the next page, as you said, or it could bring up a pop-up info box. In any case, for the situation you wanted, this is something you can try, which also involves making the cube image as an img and not as a background image:

  HTML:
  
  <a href="#">
    <div class="image">
       ::before
       <img src="image-equilibrium.jpg" alt="Equilibrium NFT">
       ::after
    </div>
  </a>
  
  CSS:
  
  .image {
    // remove height
    // remove background-image
  }
  
  .image img {
     width: 100%;
     height: 100%;
     border-radius: 10px;
  }
  

  After that, you should be able to hover over the cube and see both the overlay and the link. And yes, whenever there's an image that's central to the content, you'd always want to try to use img and not a background image. Hope this helps a bit, and happy coding!

  Marked as helpful

  1

  ---

  

  Mohieb•90

  @dev-mohiebPosted about 2 years ago

  @elaineleung Thank you so much! I will test and try this method out.

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hello Mohieb,

  Congratulation on completing this challenge.

  Excellent work! I see you have received some incredible feedback how to do the hover effect on the equilibrium image. I have few more suggestions regarding your solution, if you don't mind:

  HTML

  • The link wrapping the equilibrium image should either have Sr-only text, an aria-label or alt text that says where that link takes you.

  • For any decorative images, each img tag should have empty alt="" and add aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in ( icon-ethereum, icon-clock ).

  • Profile images like that avatar are valuable content. The alternate text of the avatar’s image should not be avatar , it’s meaningless. You can use the creator's name Jules Wyvern. Read more how to write an alt text

  • look up a bit more about how and when to write alt text on images. Learn the differences with decorative/meaningless images vs important content

  • If you wish to draw a horizontal line, you should do so using appropriate CSS. You may remove the <div class=”line”>, you can use border-top: to the avatar's part.

  • Adding rel="noopener" or rel="noreferrer" totarget="_blank"links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.

  Hopefully this feedback helps. Happy coding!

  Marked as helpful

  0

  ---

  

  Mohieb•90

  @dev-mohiebPosted about 2 years ago

  @PhoenixDev22 Thank you so much! Can you explain a little more on the last point about security? I'm not sure I understood the correlation between everything.

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi Mohieb,

  Glad to help.

  All three terms (noopener, noreferrer) are values of the rel attribute of the anchor tag in HTML and rel (rel coming from RELationship). target attribute with the _blank value instructs the web browser to open this link in a new tab. And this is the main reason why values like noopener and noreferrer are used. When you are using target=" _blank" value, something interesting happens. The page you are linking to gets partial access to the linking page. It does so through the window.opener object.

  Then, the linking page can use window.opener.location to open the malicious website. you can read more in mdn and Point Jupiter article in here

  Happy coding

  0