NFT preview card component by Gurpreet Singh Kalyan

Hello @justcoder42022, impressive.! your solution layout is very good and almost similar to the design.

However i have some notes for you:

• instead of using display property to control showing and hiding of the icon on the image on hover. You can use for example opacity. This will allow you to use transition property with it and hover will be much smoother. Since display doesn't work with transition.

.main-image-section::after {
        left : 0; /* to indicate starting point horizontally   */
        opacity: 0; /* use opacity instead of display */
        transition : opacity 200ms linear;
    }

.main-image-section:hover::after {
        opacity: 1; 
        cursor : pointer; /* better than the default and design did that too */
    }

• For .main-image-section::after you can use background property shorthand like:

.main-image-section::after {
        background: hsla(178, 100%, 50%, .6) url("images/icon-view.svg") no-repeat center;
    }

• For .main-image-section::after instead of using height: calc(100% - 4px). You can just give the <img> display : block property and everything will work fine.

.main-image-section::after {
       height: 100%;
    }

.main-img {
       display: block;
    }

• instead of using strong element inside .avtar-containter div. You can use <a> element. It's more **Semantic ** and on click this name this may lead to another page. Also don't forget to add transition for it on hover.

• using:

li {
  list-style: none;
}

this way means you want to use it Globally. If so, it's better to put it at the beginning of the code. Optional and Your way is totally right

• you can see My solution for this challenge it may be helpful for you..!

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀