responsive nft card component

Great work!

The hover effect on the image was a tricky one, but here is how I made it. I basically made a position relative container, which contains the image and the button. The button is position absolute and contains the view icon. The ::before element on the button creates the color effect. The z-index makes sure that the icon is above the color overlay so that the icon is fully white.

Here is the code:

<div class="main-image-box">
  <img
    src="./images/image-equilibrium.jpg"
    class="main-image"
    alt="Equilibrium Image"
  />
  <button class="main-image-overlay-button">
    <svg width="48" height="48" xmlns="http://www.w3.org/2000/svg">
      <g fill="none" fill-rule="evenodd">
        <path d="M0 0h48v48H0z" />
        <path
          d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15Zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10Zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6Z"
          fill="#FFF"
          fill-rule="nonzero"
        />
      </g>
    </svg>
  </button>
</div>

.main-image-box {
	position: relative;
	height: min-content;
	border-radius: 0.5rem;
	overflow: hidden;
}
.main-image-overlay-button {
	cursor: pointer;
	display: none;
	position: absolute;
	background-color: transparent;
	border: none;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
.main-image-overlay-button  svg {
	z-index: 11;
}
.main-image-overlay-button::before {
	content: "";
	position: absolute;
	display: block;
	background-color: hsl(178, 100%, 50%);
	z-index: 10;
	opacity: 0.4;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
.main-image-box:hover  .main-image-overlay-button {
	display: flex;
}
.main-image {
	display: block;
	width: 100%;
}

Keep doing!