NFT preview card component

Community feedback

• 

  Mohammed Abbas•390

  @Mohammedabbas7Posted over 2 years ago

  Congratulations on completing the challenge.

  This is just a little advice:

  • you just need to add hover effect to the image, title and creation name.

  If you don't know how to make it just tell me.

  Happy coding:)

  0

  ---

  

  McMuffin1022•30

  @McMuffin1022Posted over 2 years ago

  @Mohammedabbas7 Oh god, I have completely miss it!

  thanks my friend :)

  0

  

  Mohammed Abbas•390

  @Mohammedabbas7Posted over 2 years ago

  @McMuffin1022 If you need any help just ask me.

  0

  

  McMuffin1022•30

  @McMuffin1022Posted over 2 years ago

  @Mohammedabbas7 How do you have make it ? I'm looking for the opacity and thats kinda hard

  0

  

  Mohammed Abbas•390

  @Mohammedabbas7Posted over 2 years ago

  @McMuffin1022 I don't understand what is exactly your problem?

  0

  

  McMuffin1022•30

  @McMuffin1022Posted over 2 years ago

  @Mohammedabbas7 I'm talking about the part with the hover. When i put my mouse on the image, i want to show the eye and the color background in cyan. But, i'm trying to do it without success. Do you have any advice for that part ?

  0

  

  Mohammed Abbas•390

  @Mohammedabbas7Posted over 2 years ago

  @McMuffin1022

  • you can use pseudo element ::before to create overlay layer like this

  .card__image::before {
      content: '';
      background-color: hsl(178, 100%, 50%);
      width: 100%;
      height: 100%;
      border-radius: var(--border-radius);
  
      position: absolute;
      inset: 0;
  
      opacity: 0;
      transition: opacity .3s;
  }
  
  .card__image:hover::before {
      opacity: .6;
  }
  

  • you can use pseudo element ::after to add icon view like this

  .card__image::after{
      content: '';
      background: url(./images/icon-view.svg) no-repeat center;
      width: 100%;
      height: 100%;
  
      position: absolute;
      inset: 0;
  
      opacity: 0;
      transition: opacity .3s;
  }
  
  .card__image:hover::after {
      opacity: 1;
  }
  

  • you can aslo check my solution

  Marked as helpful

  0

  

  McMuffin1022•30

  @McMuffin1022Posted over 2 years ago

  @Mohammedabbas7 that's perfect, thanks you!

  0