Responsive NFT Card Preview

Community feedback

• 

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-MontanoPosted 12 months ago

  Hello @SarahCooper-TC!

  I don't know if you noticed that the images are not displayed. I know this is not why you asked, but if you want to improve, this should interest you. The reason why the images are not displayed is because you established an absolute path to retrieve the images, this works perfectly in your local environment, but not remotely. For it to work correctly apply the route as follows ./images/icon-ethereum.svg.

  On the other hand, to make a website well accessible you have to keep many things in mind, but some of them are the correct use of semantic tags, if you use the <img> tag put the description in the alt attribute. Have the appropriate color contrast between the background and the text, the appropriate font size and several other things.

  If you have any questions, don't hesitate to ask.

  Marked as helpful

  0

  ---

  

  P

  Sarah Cooper•30

  @SarahCooper-TCPosted 12 months ago

  Thank you so much @Enmanuel-Otero-Montano ! I just realized that and definitely needed help understanding why.

  0

  

  P

  Sarah Cooper•30

  @SarahCooper-TCPosted 12 months ago

  I just fixed it @Enmanuel-Otero-Montano

  0

  

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-MontanoPosted 12 months ago

  Excellent @SarahCooper-TC! Keep coding.

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 12 months ago

  Hello Sarah!

  Your project looks great!

  About the hover effect, here's how I did it:

  HTML

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

  CSS

           .pic {
              width: 300px;
              background: url('images/icon-view.svg') center center no-repeat;
              background-color: $Cyan-hover;
              background-size: cover;
              margin: auto;
              border-radius: 10px;
          }
          .icon {
              display: grid;
              justify-content: center;
              align-items: center;
              position: absolute;
              opacity: 0;
              background-color: $Cyan-hover;
              width: 300px;
              height: 300px;
              border-radius: 10px;
          }
              icon:hover {
                  opacity: .5;
                  cursor: pointer;
              }
  

  Just don't forget to change the class names to match yours.

  I also added a cursor: pointer; for the user to know that the image is clickable.

  I hope it helps!

  1