NFT Card challenge using flex box

Hi Martha, here are a few pointers:

• You don't necessarily need to wrap the equilibrium image in 2 divs instead use one of the divs to also wrap the icon-view image. Here is an example:

<div class="img__container">
        <a href="#">
          <img src="images/image-equilibrium.jpg" class="eq__img" alt="" aria-hidden="true" />
        </a>
        <div class="overlay">
          <a href="#"><img src="images/icon-view.svg" alt="" aria-hidden="true" / class="icon-view"></a>
        </div>
</div>

• In order to get the hover effect, add position relative to the image-container and on the overlay use position absolute so you can place the overlay on top of the image-container, convert the hsl background color to rgb [rgb(0, 255, 247, 0.4);] which lets you add the opacity for the transparency color effect, use flexbox to center the icon-view image then add opacity: 0; to hide the overlay. Then add opacity: 1; on hover so the overlay appears when you hover

.overlay:hover {
  opacity: 1;
  cursor: pointer;
}

• ETH is missing the 0.041 in the front
• The creator part can be wrapped in figure, figcaption instead of div for better semantics
• Use rem instead of px since it's not scalable
• Remove the height from .NFT-card, let the content dictates the height and use max-width instead of width
• You don't need to add width: 275px on each section to prevent them from touching the edges, simply add a padding on the container to achieve that
• For images you just need to add max-width: 100%; and display: block; and not a set width and height
• I'd suggest you to add a css reset in your stylesheet to avoid any weird browser behaviors, i use this css reset

Hope these help, Happy coding !!!

Hi @marthaeason , you did a good job on this challenge, for hover state add HTML and style before, with opacity 0 and then add hover state with opacity 1, hopefully, this will work.