NFT preview card component solution

This is a solution to the NFT preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
• My process
  • Built with
• Author
• Acknowledgments

Overview

The challenge

To build an NFT preview card component with hover states for certain interactive elements.

Screenshot

Links

• Solution URL: Add solution URL here
• My Personal Website/Portfolio: basheer.dev

My process

Built with

• Semantic HTML5 markup
• CSS
• Vanilla Javascript
• CSS Flexbox

What I learned

I've learnt to position elements with CSS positioning, allowing me to stack sibling elements on top of each other.

Here's an application of CSS Positioning in my code

        <div class="image-header">
            <div class="overlay"></div>
            <img id="eye" src="src/images/icon-view.svg" aria-hidden="true" />
        </div>

 image-header {
        position: relative;
} 	
.overlay {
     position: absolute;
}
.eye {
     position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -24px;
    margin-left: -24px;
}

The output shows the .eye element in the middle of the .overlay element, although .eye is not a child of .overlay.

I've also gained experience in using JavaScript event listeners and the classList method.

Check out how I applied onmouseover and onmouseout in this project :

const element = document.querySelector('.overlay');
const eye = document.getElementById('eye');

element.addEventListener("mouseover", () => {
    eye.classList.add('visible');
    eye.classList.remove('invisible');
});
element.addEventListener("mouseout", () => {
    eye.classList.add('invisible');
    eye.classList.remove('visible');
});

Author

• Website - basheer.dev
• LinkedIn - @basheer-dev
• Twitter - @basheer_dev

Acknowledgments

Many thanks to freeCodeCamp for their superb content. Also, many thanks to Frontend Mentor for creating this challenge.