frontend mentor nft preview

Community feedback

• 

  Coder Suresh•870

  @coderSuresh

  Posted almost 2 years ago

  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: [],
  }
  

  12

  Marked as helpful