NFT Preview card component

Community feedback

• 

  Hadiza•200

  @ThedeezatPosted over 2 years ago

  Hello, somnath 👋

  Good work on finishing this challenge! i have a few suggestions i think can help.

  For the image hover effect i think you should try something like this, for the html

     <figure class="container">
        <span class="image_cover"></span>
        <img class="child-1" src="./images/image-equilibrium.jpg" alt="nft">
        <figcaption class="heading">
          <a href="#"> Equilibrium #3429</a>
        </figcaption>
      </figure>
  

  As long as the image element and the figcaption element is wrapped in the same container, it will be easier when styling to target any of the child's element for the hover effect.

  .container {
    position: relative;
  }
  .container:hover a {
    color: #00FFF8;
  }
  .child-1,
  .image_cover {
    opacity: 1;
    width: 100%;
    height: 200px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
  }
  .container:hover .image_cover {
    position: absolute;
    z-index: 2;
    background-color: rgba(0, 255,  248,  .5);
  }
  

  And also, i think you should check out 👉 semantic html

  Well that's it, nice work again! i hope this helps.

  Marked as helpful

  0

  ---

  

  Somnath Waghmare•70

  @itssumoPosted over 2 years ago

  @Thedeezat Sure I'll look into it and add those in code thank you very much

  0

  

  Hadiza•200

  @ThedeezatPosted over 2 years ago

  @itssumo The pleasure is mine 😄

  0