NFT Preview card - Using CSS3's Grid & Flex

Community feedback

• 

  Pirate•170

  @ima9ghPosted 4 months ago

  Hi please help me.

  What is the problem with my code, why doesn't it work? Although the opacity on hover is 1!

  The eye is the icon on the photo when hovering

  .NTF .eye{
  position: absolute;
  background-image: url(images/icon-view.svg) no-repeat center;
  background-color: var(--clrBGeye);
  width: 290px;
  height: 290px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 130px;
  border-radius: 5px;
  opacity: 0;
  }
  
  .NTF .eye :hover{
  opacity: 1;
   }
  

  : I haven't uploaded the challenge yet.

  1

  ---

  

  Abdul Khaliq 🚀•72,480

  @0xabdulkhaliqPosted 4 months ago

  Thanks for reaching out @ima9gh 👋,

  There's a typo issue on css that's it, You can't set opacity: 1 for .eye element in it's normal state (which means eye is still not hovered) and can't leave space between Pseudo-classes and .eye class (element that needs to be targeted)

  Additionally, You can spice up your NFT Component with Fade-In Transition by adding, So here's an Example,

  .eye {
     transition: opacity .4s ease;
     opacity: 0;
  }
  
  .eye:hover{
     opacity: 1;
   }
  

  PS: I don't know why you're selecting .eye with .NFT class, You don't need to chain multiple classes (descendant of NFT, BTW I still don't know how you structured your HTML.)

  1

  

  Pirate•170

  @ima9ghPosted 4 months ago

  @0xabdulkhaliq

  Thank you for taking the time. opacity: 1; It was a mistake, I didn't mean it 😅

  The main div is with class NFT.

  I thought I should mention that the eye is inside the NFT.

  Today I am uploading my challenge, refer to my code to see the html structure.

  0
• 

  Hassia Issah•50,590

  @HassiaiPosted about 2 years ago

  Increase the width of .container to get the desire width in the design. for mor responsive width use max-width instead of width. There is no need for height value in .container the padding value is sufficient.

  Use rem or em as unit for the padding , margin, width and preferably rem for the font-size for more css units this watch this https://youtu.be/N5wpD9Ov_To

  Hope am helpful

  Well done for completing this challenge,

  1

  ---

  

  Abdul Khaliq 🚀•72,480

  @0xabdulkhaliqPosted about 2 years ago

  Dear @Hassiai,

  • The link you shared was very usefull to understand
  • Thanks for your feedback regarding this solution

  0

  

  Hassia Issah•50,590

  @HassiaiPosted about 2 years ago

  @0xAbdulKhalid, if you find my comment helpful mark it as helpful

  0