NFT preview card component using Bootstrap 5

Community feedback

• 

  Ahmed Hany•220

  @ahmedhanyhPosted almost 2 years ago

  Hello, @fiqihalfito! I hope you're well. Congrats on completing your project! It looks amazing.

  You've implemented the hover state for the image properly, I have also implemented it similarly. If you want to do it differently, without an empty <div> element, one thing I thought about was using blend modes, using the mix-blend-mode property. For example, you can remove the empty <div> element (the .image-hover) from the HTML markup and add the following styles to your CSS:

  .img-placeholder {
      position: relative;
      cursor: pointer;
  
      /* Here we've added a background color to the .img-placeholder element */
      background-color: var(--cyan);
  }
  
  /* When the .img-fluid is hovered over, it will blend with its background (in the set mode which in this case is 'multiply' */
  .img-placeholder:hover .img-fluid {
      mix-blend-mode: multiply;
  }
  

  That will change the color on hover, but it doesn't match the FEM design exactly and I'm not sure if you can accomplish it using this method, but it's an alternate way to get it close to the design without using an extra empty <div> element.

  Also, make the image container's (.img-placeholder) borders round like the image by adding the 'rounded-3' class to it, like so:

  <div class="img-placeholder mb-4 rounded-3">
  ...
  </div>
  

  Finally, remove the alt text from the view icon (and any icon in your project) and add aria-hidden="true" attribute to it to hide from the accessibility tree and to make the website more accessible. Icons are only decorative and won't have any value for users using assistive technologies. Read more about writing alt text for images.

  I hope I've helped. I wish you the best with your FEM journey!

  Marked as helpful

  1
• 

  Fiqih Alfito•320

  @fiqihalfitoPosted almost 2 years ago

  Hi, @ahmedhanyh! Your response is so helpful.

  You give me new knowledge such as blend mode and aria-hidden. these are something new for me. I don't ever know these before. I hope I will implement these technique to my next project. Thank you again and I hope you can spread your knowledge to other people.

  Have a nice day!

  1