NFT Preview Card Component

Community feedback

• 

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

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

  0
• 

  Isaac Saettel•100

  @INS140Posted almost 2 years ago

  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!

  0