Responsive NTF card design to you start publish your NFT's :)

Hello @ricardodcc!

Your project looks great!

About the hover effect, 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.

I also added a cursor: pointer; for the user to know that the image is clickable.

I hope it helps!

Other than that, you did a great job!

Now I realize that I could used padding properties to center the content of my card instead of using the margins as I did. I will update my code now.