NFT Preview Card using hover effects

Community feedback

• 

  Dylan Heslop•1,570

  @dylan-dot-cPosted 9 days ago

  Well done! In the case of shortening your css, I can't help since I haven't done this challenge as yet, but generally try to reuse classes and maintain a balance with not too much classes with small css code, or too little classes with alot of css code.

  I don't know if it a formatter you used or something you did intentionally, but make sure that a css declaration is on a different line as the selector.

  body {
      background-color: red;
  }
  

  For the hover effect what you can do is have a div then wraps both images the main image and the .eye class with the eye image. make the .eye class absolute and full width and height of the container. then you can make the .eye class flex/grid and center-aligned it. In case you dont understand what I wrote(I doubt i do💀) here is some code

  //wraps both images
  .image--wrapper {
  //some styles
      position: relative;
      cursor: pointer; //could be on any of these divs
  }
  //full width and height of image--wrapper
  .eye-wrapper {
      opacity: 0;//we can do a fade effect, cant see by default
      transition: 150ms ease-in;//shows a transition instead of just popping up
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: cyan;
  }
  
  .image--wrapper:hover .eye--wrapper {
      opacity: 1;
  }
  

  this is just the css code and I haven't tested it so it may be incorrect, but let me know if you still need help

  <div>
      <img src={} class="equillibrium" /> <!-- this could be in an extra div if you want -->
      <div class="eye-wrapper">
          <img src={eye} />
      </div>
  </div>
  

  This may not be accurate but it should be close, take care.

  0