NFT preview card component solution with HTML and CSS

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted about 1 year ago

  Nice well done. The overlay is not working see below how you can fix this

  .main {
    background-color: var(--very-dark-blue-card-bg);
    width: 19.44rem;
    border-radius: 0.83rem;
    padding: 1.33rem;
    position: relative; /* add this so that the overlay works */
  }
  
  /* .bgn-image-container { /* you can remove this, you don't need this */
    background-color: var(--cyan);
    position: relative;
  } */
  
  .bgn-image-container, .bgn-image, .overlay {
    border-radius: 0.55rem;
  }
  
  .bgn-image {
  /*   display: block; */ /* this is what was causing the problem with the overlay */
    width: 100%;
    border-radius: 0.44rem;
  }
  
  .overlay {
    position: absolute;
    background-color: hsla(178, 100%, 50%, 50%);
   /* these lines below is for the overlay to work */
    top: 1.33rem; /* */
    left: 1.33rem; /**/
    width: 302.05px; /**/
    height: 302.05px; /**/
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
  }
  

  Marked as helpful

  0

  ---

  

  Igor•230

  @For1207Posted about 1 year ago

  Thank you very much for your reply. You are right; the background color in .bgn-image-container is not necessary; it is a leftover that I overlooked from another approach. Could you please specify when the overlay doesn't work? I've checked the code and the GitHub link and opened it in the browser. Everything looks working; the overlay appears and disappears. I don't see how I can attach the screenshot to demonstrate. But again, thanks a lot for the comment @hitmorecode

  0

  

  hitmorecode•6,680

  @hitmorecodePosted about 1 year ago

  @For1207 You are right I just opened in brave browser and it works, but if I open in firefox it doesn't work.

  0

  

  Igor•230

  @For1207Posted about 1 year ago

  It’s interesting. Let try. Firefox on PC or Mac? @hitmorecode

  0

  

  Igor•230

  @For1207Posted about 1 year ago

  Yes, you're right. Firefox 117.0.1, Safari 16.6, MacOS Ventura 13.5.2 - no overlay. Actually, if you point to the image's top left corner, the eye icon appears. @hitmorecode

  0

  

  hitmorecode•6,680

  @hitmorecodePosted about 1 year ago

  @For1207 tried on windows and Linux Ubuntu only on chrome and brave is working. The fix that I gave you before it works on Firefox

  Marked as helpful

  0

  

  Igor•230

  @For1207Posted about 1 year ago

  Thank you! I've fixed it. Now it works. At least in Firefox, Chrome, and Safari in MacOS @hitmorecode

  0