NFT Card

Community feedback

• 

  Naleeka•470

  @NaleekaPosted about 2 years ago

  Hi @osamanazakat 👋

  Answer to your Question,

  To zoom the image on hover, You must add overflow hidden to the parent element and scale up the image using transform property.

  It'd be like this 👇

  // css file
  .container{
    padding: 1.5rem;
  }
  .image-container{
    width: 100%;
    overflow :hidden;
  }
  .image-container img{
    width: 100%;
    object-fit: contain;
    transition : transform 0.25s ease;
  }
  .image-container:hover img{
    transform : scale(1.2);
  }
  

  If you want to add the eye icon on hover you must follow these steps 👇

  (There is maybe another way, this is how I did it)

  // html file
  <div class="img-container">
    <img src="images\image-equilibrium.jpg" alt="equilibrium image">
    <div class = 'view'>
      <img src="./images/icon-view.svg" alt="" class="eye-icon" aria-hidden="true" />
    </div>
  </div>
  
  // css file
  .img-container{
    position: relative;
  }
  .view {
    position: absolute;
    width: 100%;
    height : 100%;
    padding: 4rem;
    pointer-events: none;
    background: var(--cyan-color);
    opacity: 0;
    display: flex;
    justify-content:center;
    align-items : center;
    transition : all 0.3s ease;
  }
  .img-container:hover .view{
    opacity: 1;
  }
  

  Happy Coding Buddy 👩‍🚀🖤

  2

  ---

  

  osama•270

  @osamanazakatPosted about 2 years ago

  @Naleeka After reading you comment now I know how to do it. Thanks brother ❤️

  1
• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Osama, congrats on finishing the challenge! you did a pretty good job!

  I don't know what you are reffering exactly with zooming the image, maybe you want to get some scale effect while hovering the image?

  If you want to get that effect you just have to add: transform: scale(1.2); in your hover selector, the unit inside is the value of how much you want it to scale, you could also use a transition: transform 0.5s ease; in your image to get a bit of an animation while getting the scale on hovering!

  Try it in your own code and tell me how it goes.

  Hope my feedback helps you, if you have any question, don't hesitate to ask!

  2

  ---

  

  osama•270

  @osamanazakatPosted about 2 years ago

  @DavidMorgade I was talking about eye image . I really don't know much about Css transitions but, I'm learning about it. Thanks for the comment Bro 😊.

  1