NFT preview card with CSS flexbox

Community feedback

• 

  Ahmed Mohamed 🇵🇸•310

  @ahmedafsaPosted 12 months ago

  Hello, great work!

  Here's my solution to implement the hover effect. I hope it proves helpful 3>

  .equilibrium {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
  }
  
  .overlay {
    background: hsla(178, 100%, 50%, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.5s ease;
    border-radius: 16px;
  }
  
  .overlay:hover {
    opacity: 1;
  }
  

  The transparency in the overlay div background comes from adjusting the Alpha in the color code to 0.4 (40%), ensuring it doesn't impact the view icon opacity.

  Marked as helpful

  1

  ---

  

  Dongmo Shu•280

  @dongmo-shuPosted 12 months ago

  Hello @ahmedafsa

  This modification worked. Thank you

  It really simplifies the process and makes the code shorter. Your comment below was even more helpful in understanding how it works.

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 12 months ago

  Hello @Singraft!

  Your project looks great!

  That hover effect looks pretty good to me. I'd just add a cursor: pointer to it, since the idea is that the image is clickable.

  Other than that, you did a very good job!

  Marked as helpful

  0

  ---

  

  Dongmo Shu•280

  @dongmo-shuPosted 12 months ago

  Hello @danielmrz-dev

  I forgot to add that. Thank you

  1

  

  T

  Grace•31,270

  @grace-snowPosted 10 months ago

  @danielmrz-dev never add cursor pointer (or hover effect) to a non interactive element! Super important.

  0
• 

  T

  Grace•31,270

  @grace-snowPosted 10 months ago

  You've missed out all of the essential interactive elements in this. The html is the most important part of this challenge. I recommend you read about planning html on FEDmentor.dev and try to consider other modalities in your work such as keyboard users and screen reader users. Nothing is clickable in this at the moment for anyone. Getting html right is the most important foundational step in any challenge

  0