Responsive Design For NFT Card Component (HTML & CSS) Using FlexBox

Community feedback

• 

  Sean Gray•690

  @seangray-devPosted almost 2 years ago

  Hey Hanzala,

  Similarly to a previous comment. Here is some of my CSS for this challenge:

  • Setting the parent element to position relative:

  .card-top {
      border-radius: 15px;
      overflow: hidden;
      position: relative;
  }
  
  
  .card-top img {
      width: 100%;
      display: block;
  }
  

  • And then the overlay image to take up the entire space of it's parent element while hiding it:

  .img-overlay {
      position: absolute;
      left: 0; 
      top: 0; 
      height: 100%;
      width: 100%;
      background-color: hsla(178, 100%, 50%, 0.3);
      display: none;
  }
  
  .img-overlay img {
      position: absolute;
      width: 50px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
  }
  

  • And then to show it upon hovering:

  .card-top:hover .img-overlay {
      display: block;
  }
  

  Hopefully this helps. Keep it up! 😁

  Marked as helpful

  1
• 

  Sujood Qureshi•190

  @Sujood-QureshiPosted almost 2 years ago

  Hey Hanzala! 🙋‍♂️

  Congratulations on completing the NFT preview card component challenge

  I also got the same problem while working on this challenge. But I did manage to solve it

  So here is a tip

  index.html

  • You can add one blank <div> element and add the <img> element with src = icon-view.svg after <img class="equilib-img" src="./images/image-equilibrium.jpg" height="250px" width="260px" alt="Equilibrium.io"> "from your code"

  index.css

  • Then make position absolute of both blank <div> element and <img> element with src = icon-view.svg and make display none for both the elements

  • Give height and width to blank <div> element and then give the background color as per requirement.

  • Then update your hover effect from .equilib-img:hover{cursor: pointer; background-color: hsl(178,100%,50%);} to .equilib-img:hover .blank-div{ display: block;} and .equilib-img:hover .img-view { display: block}

  You can take a look at my {NFT preview card component} solution

  I hope you find it useful! May your front-end journey be filled with successful 😊😊

  Marked as helpful

  0
• 

  Ahmed Mahrous•980

  @AhmedMahroussPosted almost 2 years ago

  good jop my bro Congrats on completing your first challenge!🎊🍻 you can do it by background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)); If you have any questions or need further clarification, feel free to reach out to me. Happy Coding! 🎆🎊

  0