NFT preview card component

Hi txosca.

You provided a creative solution for hovering the image. However, I think its better solution to use pseudo-elements ::before and ::after. This way the hover effect will always appear over the image. You can check out my codepen to study ::before/::after here. Try adding the class for the div containing the image and use something like the code below.

Also I dont think its a good idea to mix in-line and external css in one project. It creates a big mess.

I hope this helps!

.div-image {
  position: relative;
}

.div-image:hover::after {
  content:"";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background-color: hsla(178, 100%, 50%, 0.7);
}

.div-image:hover::before {
  content:"";
  position: absolute;
  inset: 0;
  background-image: url(images/icon-view.svg);
  background-repeat: no-repeat;
  background-position: center;
  z-index: 100;
}