NFT preview card component

Community feedback

• 

  Keo Lamola•60

  @KeoLamolaPosted 11 months ago

  Hi Tiong Chuan,

  Thank you so very much for the concise detailed and insightful explanation. Now that you mentioned javascript, it makes so much sense.

  Thank you for taking your time out of your busy schedule, to help me out.

  0
• 

  Keo Lamola•60

  @KeoLamolaPosted 11 months ago

  HI @chuantiong, i like your solution and have been studying your code because i fins your solution impressive. I don't seem to understand the section where you were able to reville the "eye" icon when clicking the nft image.

  Can you please provide an explanation, i cannot seem to grasp the concepts you used.

  Your response is highly appreciated.

  0

  ---

  

  Tiong Chuan•260

  @chuantiongPosted 11 months ago

  Hello @OekPhlesym,

  Thank you for your interest in this approach. I've implemented a solution as follows:

  I encapsulated the card__image-view-icon within the card__image-overlay-wrapper class and initially applied the hide class to ensure it's hidden by default:

  <div class="card__image-overlay-wrapper hide">
    <img
       class="card__image-view-icon"
       src="./images/icon-view.svg"
       alt=""
    />
    <div class="card__image-overlay"></div>
  </div>
  
  

  I accessed the card__image using the querySelector method in JavaScript:

  const cardImage = document.querySelector(".card__image");
  
  

  I set up event listeners to toggle the visibility of the overlay wrapper. When the cardImage gains focus, the hide class is removed, making it visible. Conversely, when it loses focus, the hide class is reapplied:

  cardImage.addEventListener("focus", () => {
      document.querySelector(".card__image-overlay-wrapper").classList.remove("hide");
  });
  
  cardImage.addEventListener("blur", () => {
      document.querySelector(".card__image-overlay-wrapper").classList.add("hide");
  });
  
  

  I trust this explanation provides clarity on the solution. Please feel free to adapt and implement it as per your needs. Happy coding!

  1