NFT preview card component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hi, @brunokzz! 👋

  Creating the overlay for the Equilibrium is the hardest part of this challenge. I agree with that.

  I recommend getting the HTML right first for the Equilibrium image.

  • The image should be wrapped by an interactive element such as an anchor tag. All elements that have interactivity should be wrapped interactive elements.
  • The alternative text of the image should be telling the purpose of the link. For example, with the href="images/image-equilibrium.jpg" for the <a>, the alternative text can be "Preview the Equilibrium".

  Then, to create the overlay, you need to use a pseudo-element from the <a> and background properties. Use, background-image to show the eye icon. Then, use background-color with rgba or hsla format to control the opacity of the background color.

  I hope this helps. Happy coding! 😄

  0
• 

  eve•230

  @Eve-WangariPosted over 1 year ago

  I also struggled with that for some time, the way I handled it was by adding a transition. you place view icon with its background in your html in their own class, then you surround that class with another one to enable positioning, then on hover you transition the height and the opacity. you can check my solution here. https://github.com/Eve-Wangari/nft-preview. I hope it helps.

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  SUGGESTION 💡

  • "I've looked at a lot of websites, forums and other sources of information which recommended properties like background-color, filter and even linear-gradient, but none of them worked 😣😣"

  ---

  • But you forget to look other's people solution, let me share my css snippet which may help you

  <img src="images/image-equilibrium.jpg" alt="NFT photo" class="nft-img">
  

  ---

  • Replace the single img with the following nested approach

  <div class="product-picture">
     <div class="product-view">
         <img src="./assets/images/icon-view.svg" class="view-icon" alt="view-icon">
     </div>
  </div>
  

  ---

  • After setting up the html now you want to add the below styles in your css file

  ---

  .container > .product-picture {
      background: url('../images/image-equilibrium.jpg');
      background-size: 100%;
      height: 260px;
      border-radius: 10px;
      overflow: hidden;
  }
  .container > .product-picture > .product-view {
      height: 100%;
      background-color: rgba(2, 252, 252, 0.4);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      display: grid;
      place-items: center;
      opacity: 0;
      transition: .3s ease-out
  }
   .product-view > img {
      width: 35px;
  }
  .product-view:hover  {
      color: var(--cyan);
      opacity: 1;
  }
  

  ---

  • If you still feel stucked then feel free to review my solution, which helps to know how i tackled this problem

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0