👩‍💻 NFT preview card component

Community feedback

• 

  imad•3,330

  @imadvvPosted about 2 years ago

  Greetings Caroline Amorim! Congratulations on completing Your challenge!,

  for the hover effect, this snippet should do it, and you can play width this changes in you code

  .picture {
    margin-bottom: 1.5rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
  
    position: relative;
    background-color: hsl(178, 100%, 50%);
    z-index: 1;
  }
  
  .picture img:first-child {
    width: 100%;
    height: 100%;
    border-radius: 0.625rem;
    cursor: pointer;
    z-index:-2;
    opacity: 1;
    transition: all 300ms ease-in-out;
  }
  
  .picture img:last-child {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: all 300ms ease-in-out;
    z-index: 2;
  }
  
  .picture:hover  img:first-child {
    opacity: 0.5;
  }
  
  
  .picture:hover img:last-child {
    opacity: 1;
    visibility: visible;
  }
  
  / * the trick is simply apply hover effect for both the image and icon */
  
  

  Hope this Help!

  Happy coding and keep up the good work 👍

  Marked as helpful

  1

  ---

  

  Caroline Amorim•50

  @CarolAmorimPosted about 2 years ago

  @imadbg01 Hello!! Thank you for the comment, it really helped me a lot to finish this challange and to learn with it.

  1

  

  imad•3,330

  @imadvvPosted about 2 years ago

  @CarolAmorim You're Welcome.

  1