landing page with html and css

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Anthony,

  • The active state for the image on the NFT preview card component is not working as recommended on this challenge. To do the active state for the image on the NFT preview card I suggest you wrap the image of the NFT with the img-wrapper element and create another element to make it overlay on the image, it contains the view icon.

  <div class="img-wrapper">
        <img class="image-equilibrium" src="images/image-equilibrium.jpg" alt="Image Equilibrium">
        <div class="overlay"><img src="images/icon-view.svg" alt=""></div>
  </div>
  

  Then add the following styles:

  .img-wrapper {
    width: ...; /*as you want*/
    height: ...; /*as you want*/
    position: relative; /*To flow the child element on it*/
    cursor: pointer;
    overflow: hidden;
  }
  .img-wrapper .image-equilibrium{
    width: 100%;
    height: 100%;
  }
  .overlay {
    background-color: hsla(178, 100%, 50%, 0.5);
    display: flex;       /* Center the view icon with flexbox*/            
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
  .img-wrapper:hover .overlay {
    opacity: 1;
  }
  

  There is another way to do the active state for the image on the NFT preview card by creating pseudo-elements (::after, ::before) to use one as an overlay and other for view-icon.

  Some Resources

  • How to Center Anything with CSS - Align a Div, Text, and More
  • 11 Ways to Center Div or Text in Div in CSS
  • Pseudo-elements
  • ::after (:after)
  • ::before (:before)

  Hope this is helpful to you... Keep coding👍

  Marked as helpful

  0
• 

  Gustavo•200

  @GushigustavoPosted over 2 years ago

  Olá Guilherme, eu também tive uma dificuldade nesse projeto justamente onde vc esta mencionando, porém fui dando uma pesquisada e achando o caminho. Acredito que estamos todos em desenvolvimento até os que são profissionais tem seus desafio . Se vc desejar da uma olhada no meu e tenta entender como foi feito, como disse estamos todos no aprendizado . Vamos codificar!!

  Marked as helpful

  0