@KeoLamola
Posted
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.
@KeoLamola
Posted
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.
@chuantiong
Posted
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!
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
