Skip to content
Submitted over 1 year ago

NFT Preview Card Component using flexbox

animation, fresh
Aaryan_Urunkar•100
@Aaryan-Urunkar
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This project is my first attempt to grasp the basics of flexbox. Initially I never knew how to even center elements but it has been made much easierby using flexbox. Also alignment of all elements is more easier to do. I am still learning how to implement hover effects using CSS hence I was unable to do the hover part of the challenge. A little help here would be appreciated.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Daniel 🛸•44,790
    @danielmrz-dev

    Hello @Aaryan-Urunkar!

    Your project looks great!

    It's quite a challenge to add that hover effect properly. Here's how you can do it:

    HTML

    <img src="images/image-equilibrium.jpg" alt="Equilibrium" class="pic">
    <div class="icon">
      <img src="images/icon-view.svg" alt="icon-view" class="icon-view">
    </div>

    CSS

             .pic {
            width: 300px;
            background: url('images/icon-view.svg') center center no-repeat;
            background-color: $Cyan-hover;
            background-size: cover;
            margin: auto;
            border-radius: 10px;
        }
        .icon {
            display: grid;
            justify-content: center;
            align-items: center;
            position: absolute;
            opacity: 0;
            background-color: $Cyan-hover;
            width: 300px;
            height: 300px;
            border-radius: 10px;
        }
            icon:hover {
                opacity: .5;
                cursor: pointer;
            }

    Just don't forget to change the class names to match yours.

    You can also add the hover effect on the title h1 as well as the name of the person.

    I hope it helps!

    Other than that, you did an excelent job!

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord