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.

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

Solution URL: My solution URL is here
Live Site URL: My live site URL Justt here

My process

Built with

Semantic HTML5 markup
CSS custom properties

What I learned

Just below , you can see something that i learned : How to make an Image Overlay ! Try It , it is really usefull !

    <div class="hero-container">
      <img class="hero" src="./images/image-equilibrium.jpg" alt="Equilibrium">
        <div class="eye">
          <img src="./images/icon-view.svg" alt="An Eye">
        </div>
    </div>

.hero {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
    border-radius: 15px;
}

.eye {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    padding: 42% 42%;
    border-radius: 15px;
    background-color:  hsla(178, 100%, 50%, 0.35);
}

.hero-container:hover .hero {
    opacity: 0.3;
}

.hero-container:hover .eye {
    opacity: 1;
    cursor: pointer;
}

Useful resources

How to make an Image Overlay - This helped me to understand how to make an image overlay. I really liked this pattern and will use it going forward. Because , i had a hard hour, thinking about to really make it. The best choice was to google it ! I Made a snippet just above !

Author

Frontend Mentor - @AklemX

Thanks ! X)

About

Languages

Language:CSS 63.2%Language:HTML 36.8%

ArklemX / nft-preview-card-component-main