NFT preview card built using html and css

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Spaceship Tech, I think you did a great job here, and the overlay is working well 🙂

  I just checked out your code and saw that you used position: absolute in positioning the eye icon. What I did instead was, since the icon is within the overlay container, I just used display: grid to center the icon. Here's what my overlay looked like:

  .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: hsla(178deg, 100%, 50%, 0.5);
    opacity: 0;
    display: grid;
    place-content: center;
    transition: opacity 200ms ease-in-out;
  }
  .overlay img {
    width: 3rem;
    height: 2rem;
  }
  .overlay:hover {
    opacity: 1;
  }
  

  Hope this gives you some ideas on what you can try next time!

  0