Responsive NFT card

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Hello Samuel, your project is looking great, congratulations! The whitish shadow adds an interesting touch compared to black. Well done.

  To center your card in the middle, consider adding this snippet to your body:

  height: 100vh;
  align-items: center;
  

  This way, the body will occupy the entire vertical screen space and will center your card instead of stretching it out.

  Regarding the hover part, you can add a <div> for that. You'll need to place the image and the <div> within the same container, then use that container as position: relative, and the overlay as position: absolute. Then, you can apply the styling.

  Once again, congratulations! If you have any questions, please feel free to comment below, and I'll do my best to assist you.

  Marked as helpful

  0

  ---

  

  Samuel Sylvester•330

  @Sylvester009Posted 7 months ago

  @R3ygoski, Thank you for your help. My card is now perfectly centered but please can you explain more about the hover, positioning part.

  0

  

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Hello @Sylvester009, of course, I think my explanation was unclear because I didn't provide an example, here's one (So you can better visualize, copy the snippets and place them in your HTML and CSS respectively): HTML:

  Note: This snippet should replace you current: <img src="images/image-equilibrium.jpg" alt="Equilibrium" class="image" />

  <figure class="image-container">
          <img src="images/image-equilibrium.jpg" alt="Equilibrium" class="image" />
          <div class="overlay">
              <img class="icon-view" src="images/icon-view.svg" alt="">
          </div>
  </figure>
  

  CSS:

  
  .image-container {
    position: relative;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transition: .3s;
    cursor: pointer;
  }
  
  .overlay:hover {
      background: hsla(178, 100%, 50%, 0.5);
  }
  .overlay:hover .icon-view {
      opacity: 1;
  }
  
  .icon-view {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4rem;
    opacity: 0;
  }
  

  I hope this can be of great help. If you have any questions, you know what to do, just comment below, and I'll try to help as best as I can.

  0