NTF card with flexbox

Community feedback

• 

  luking•230

  @alululululuerPosted over 1 year ago

  Hello! For the hover state, you can use pseudo element "::before" or "::after" to implement.

  • add background-color and background-image to the pseudo element
    • remeber to add postion relative to section.container__img
    • background-color should use rgba() or hsla() to add transparency then you can see "section.container__img" through the color.
    • set the pseudo element's display value is "none" default state and "block" when hovering.

  section.container__img {
      position: relative;
  }
  section.container__img::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: hsla(178, 100%, 50%,0.5);
      background-image: url(./images/icon-view.svg);
      background-position: center;
      background-repeat: no-repeat;
  
      display: none;
  }
  
  section.container__img:hover::before {
    display: block;
  }
  

  • some other issus after the you done obove
    • remove the img element in the section.container__img and use background-image instead which is better to control the image size.
    • give a height to the section.container__img

  Hope it's helpful to you.

  Marked as helpful

  1
• 

  Lesley Kimutai•565

  @LeskimPosted over 1 year ago

  @Alt08 Nice completing the challenge👏🏾. To add the hover effect you can add an empty div with a class of .view below your nft img then style the container__img section when the div is hovered. You can also add the eye image on hover too and center it as shown below. Hope this helps you out

   .container__img .view:hover  {
    background-color: var(--Cyan);
    background-image: url("../images/icon-view.svg");
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    opacity: 0.75;
  }```
  

  1