NFT preview card component (mobile-first workflow)

this challenge was relatively easy until I had to code the active states, the hover effect on the image was very hard to figure out, I searched for an entire day on how to change the color of a jpg image but nothing seemed to give the expected results. so I tried to find my own solution, which I did.

basically what I ended up doing was I lowered the opacity both on the image itself and the background color ,after that worked I had another problem where I would hover on the view-icon and the hover effect would break, so to solve that I had to make the view-icon the actual trigger for the hover effect, and for that to work I had to give the view-icon the same width as the NFT image, and to prevent the icon from stretching to fit that width I used "object-fit: scale-down".

.NFT:hover {
    opacity: 0.5; 
  }
  .img-div:hover .view-icon {
    visibility: visible;
    background-color: hsl(178, 100%, 50%, 0.5);
    border-radius: 10px;
  }

 .view-icon{
   position: absolute;
   visibility: hidden;
   z-index: 9999;
   width: 281px;
   object-fit: scale-down;
  }

honestly although it works, I'm not so sure about the approach I took to solve this challenges, I would appreciate some feedback on that.