/nft-preview-card

A simple react project rendering preview of a NFT card.

Primary LanguageJavaScript

Frontend Mentor - 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

Users should be able to:

  • View the optimal layout depending on their device's screen size
  • See hover states for interactive elements

Screenshot

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow
  • React - JS library

What I learned

I learned how to add another layer on hover state of an image. I structured first the HTML elements and use CSS styling to accomplish the ideal design.

See the code snippets below:

    <div className="hero-image">
    <img src={images}  className= "main-image" alt='img' />
        <div className="image-hover">
            <img src={iconView} className="icon-view" alt="icon view"/>
        </div>
    </div>
.image-hover {
    background: hsla(178, 100%, 50%, 0.5);
    width: 278px;
    height: 278px;
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 37.8%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    border-radius: 8px;
    
}

Continued development

In this project I would like to improve more on styling the hover state of the hero image,the placement of the components and perfect height of the container. I struggled with the actual position of the card since I'm using a small screen.

Useful resources

  • W3schools - This help me solved the hover state of the hero image. I used this example and applied it on CSS style.

Author