NFT-preview-card-component built with media query and flex-box

Community feedback

• 

  yas•390

  @yosrajalaliPosted over 1 year ago

  Hi Ismail👋.You did great on this project, I think you have forgotten to add hover effect on the image.to do this, you need to add this👇 to your code..

  {
  <div class="img__container">
  <img
  class="diamond__img"
  src="images/image-equilibrium.jpg"
  alt="diamond"
  />
  <div class="middle">
  <img class="icon" src="images/icon-view.svg" alt="view icon" />
  </div>
  </div>
  }
  

  and this is for your Css👇

  {
  .img__container:hover .middle {
  opacity: 1;
  cursor: pointer;
  }
  
  .middle {
  transition: 0.5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: hsla(178, 100%, 50%, 0.3);
  border-radius: 0.5rem;
  }
  
  }
  

  • also you need to add width and height to the middle class that is exactly the same as the image size.

  I hope you find it useful..

  Marked as helpful

  0
• 

  Ismail Akinkunmi•140

  @ismailakinkunmiPosted over 1 year ago

  @yosrajalali, Thanks for your feedback, if there is any way you need someone to reach out to do not hesitate to reach me thanks for your review once again.

  1