frontend mentor nft preview

Hey there, excellent work.

I didn't know anything like the Pixel Perfect extension existed. Thanks for this.

I have created a pull request on your repo to solve your issue with the hover state overlay and icon. You can find it here: https://github.com/retronauta/frontend-mentor-nft-preview/pull/1

Alternatively, you can look through my solution here: https://github.com/coderSuresh/nft-preview-card

And, if you don't feel like going through links, here is a general idea of how I did it.

index.html

        - use img_container class
        - use custom css to display overlay on hover (in input.css)
    -->
      <div
        class="img_container relative flex cursor-pointer justify-center items-center h-fit my-6"
      >

      <!-- 
        - making overlay with view icon 
        - bg-transparent-cyan is a custom color from tailwind.config.js 
        - that gets its value from css variable in input.css
      -->
        <div
          class="overlay absolute pointer-events-none top-0 hidden left-0 w-full h-full bg-transparent-cyan rounded-xl"
        >
          <div
            class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
          >
            <img
              src="./images/icon-view.svg"
              alt="view icon"
              class="w-12"
            />
          </div>
      </div>

      <!-- 
        - we don't need any pointer events on this image 
        - using pointer-events-none class
      -->
        <img
          src="./images/image-equilibrium.jpg"
          alt="Nft picture"
          class="rounded-xl pointer-events-none"
        />
      </div>

input.css

:root {
    --transparent-cyan: hsla(178, 100%, 50%, 0.50);
}

/* make image overlay visible on hovering its parent div */
.img_container:hover .overlay {
    display: block;
} 

tailwind.config.js

module.exports = {
  content: ['./dist/*.{html, js}'],
  theme: {
    extend: {
      colors: {
        ....
        'transparent-cyan': 'var(--transparent-cyan)' //from css variable (to be used in html)
      },
      fontFamily: {
        outfit: ['Outfit'],
      },
    },
  },
  plugins: [],
}