NFT Preview Card Component

to make long story simple 1]design the card that has an eye icon in the center using grid or flex ... 2]and then the card must be transparent so use opacity .card-overlay { display: flex; position: absolute; /*!important*/ border-radius: 7px; align-items: center; justify-content: center; flex-direction: column; top: 0; left: 0; width: 100%; height: 100%; background-image: url(./images/icon-view.svg) no-repeat center; background-color: hsl( 178, 100%, 50%, 0.5 ); /*0.5 is opacity of color to enable transparency*/ opacity: 0; transition: ease-in-out 0.8s; }

3]that card must be hidden unless the user hover over it so in the css add :hover property to be css .card-overlay:hover { opacity: 1; transition: ease-out transform 0.8s; }

Hello! Congrats on completing the challenge!

I had some difficulty with this portion of the challenge as well, but I do believe that my solution is a good fit. How I ended up getting the active state over the image was by adding a <div> element underneath the image that is set to the exact same size as the image. Both the image and the <div> need to have the CSS attribute position: absolute so that they stack. Next, add the opaque background color to the <div> element. I used hsla(178, 100%, 50%, 0.3).

The view icon will need to be added to the <div> element as well and the <div> should have the attribute display: none until the cursor is hovering over the image container.

Here are some snippets from my code:

<div class="image-container"> <img> <div class="hover-cover"> <img> </div> </div>

.equilibrium-image { position: absolute; }

.hover-cover { display: none; position: absolute; background-color: hsla(178, 100%, 50%, 0.3); }

.image-container:hover .hover-cover { display: block; }

I hope this helps!