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
• Acknowledgments

Overview

Our Equilibrium collection promotes balance and calm.

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

• Solution URL: Click here for Source code
• Live Site URL: Click here for live site

My process

Mapped out the site and then started coding.

Built with

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

What I learned

This code I found interesting because it creates the image overlay on hover and doing that sparked my interest in learning more about CSS animations.

.image-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height:350px;
    margin: 20px;
    border-radius: 20px;
    background-color: hsla(215, 51%, 70%,0.6);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.image-overlay:hover{
    opacity: 1;
}
.view-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 50px;
    cursor: pointer;
}

Continued development

We're going to just keep building on top of this.

Useful resources

• How to have images in line with text in css - This helped me for aligning images with text. I really liked this pattern and will use it going forward.

• How to Create a Horizontal Line in HTML - This is an amazing article which helped me finally understand how to insert a line in HTML. I'd recommend it to anyone still learning this concept. What I like about it is that it is very simple, easy to understand and you can implement it straight into HTML code.

• Image Hover Text Overlay Effect with HTML & CSS - Web Design Tutorial This Youtube video helped us with the image overlay effect. I really liked this pattern and will use it going forward.

Author

• Website - Ubaid Russell
• Frontend Mentor - @ubaidrussell
• Twitter - @UbaidRussell

Acknowledgments

Shout out to the Frontend Mentor community for being so helpful and supportive.