nft card design

Here's an example, you could create an "overlay" div after the image and its initial state would be "opacity: 0" and when the user hovers over the container where the image is, you would apply the "opacity: 1"

• HTML

<div class="card-img">
  <img src="./assets/images/image-equilibrium.jpg" alt="Image Equilibrium" />

  <div class="card-image-overlay">
    <img src="assets/images/icon-view.svg" alt="Icon View">
  </div>
</div>

• CSS

.card-img {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
  position: relative;
}

.card-img img{
  object-fit: cover;
}

.card-image-overlay{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
  background-color: hsl(178, 100%, 50%, .5);
  transition: .3s;
}

.card-image-overlay img {
  width: 48px;
}

.card-img:hover .card-image-overlay {
  opacity: 1;
}