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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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

Links

• Live site URL

My process

Built with

• Semantic HTML5 markup
• Flexbox
• Responsive Design

Note: These are just examples. Delete this note and replace the list above with your own choices

What I learned

One important concept I learned in this project was active states, especially for images. I learned how to use positioning to overlay images on top of each other. The following CSS was used to create an overlay for the image in the card when hovered on.

.image {
    position: relative;
}
.overlay {
    /* display: none; */
    background-color: #0ff1e8;
    opacity: 0;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    transition: opacity .5s;
    border-radius: 10px;
}
.image:hover .overlay {
    opacity: .5;
}

This corresponds to the following HTML5 code.

    <div class="image">
      <img class="equil" src="images/image-equilibrium.jpg" alt="equilibrium">
      <div class="overlay">
        <img src="images/icon-view.svg" alt="hover effect">
      </div>
    </div>

These codes combine to create the following effect when hovering on the image:

Continued development & learning

I'd like to learn more about positioning to help clarify some of the positioning issues I had run into along the way. I hope to use some of the knowledge I gained in this project to help me create hover cards in my own future projects.

Useful resources

• W3 Schools - Their articles on several CSS concepts such as Box Shadowing helped me with the styling used in this project.
• Kevin Powell's Conquering Responsive Layouts Course helped me get a strong understanding of flexbox and its various properties which I used.
• Web Dev Simplified's youtube video on CSS positioning. This helped me use absolute positioning for the overlay image.

Author

• Frontend Mentor - @SanjayB06