NFT-preview-card-component-main

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey yousra, It looks good!...

  My suggestions:

  • The active state for the image on the NFT preview card component is not working as recommended on this challenge. To do the active state for the image on the NFT preview card I suggest you wrap the image of the NFT with the img-wrapper element and create another element to make it overlay on the image, it contains the view icon.

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

  Then add the following styles:

  .img-wrapper {
    width: ...; /*as you want*/
    height: ...; /*as you want*/
    position: relative; /*To flow the child element on it*/
    cursor: pointer;
    overflow: hidden;
  }
  .img-wrapper .image-equilibrium{
    width: 100%;
    height: 100%;
  }
  .overlay {
    background-color: hsla(178, 100%, 50%, 0.5);
    display: flex;       /* Center the view icon with flexbox*/            
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
  .img-wrapper:hover .overlay {
    opacity: 1;
  }
  

  There is another way to do the active state for the image on the NFT preview card by creating pseudo-elements (::after, ::before) to use one as an overlay and other for view-icon.

  • When hovering over the card title Equilibrium #3429 and the creator name Creation of Jules Wyvern the color should be changed to cyan as recommended in this challenge.

  h1:hover {
    color:hsl(178, 100%, 50%);
    cursor:pointer;
  }
  

  Some Resources

  • Pseudo-elements
  • ::after (:after)
  • ::before (:before)

  I hope this is useful to you... Keep coding👍

  0

  ---

  

  Yous•170

  @yousra10Posted over 2 years ago

  @Bayoumi-dev Hey Ahmed, thank you very much for taking time and explain where should I rectify the code! thank you it's very helpfull!

  0