NTF card with flexbox

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.

@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;
}```