Responsive NFT Card using Flexbox

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Whitney, first off, welcome to Frontend Mentor, and congrats on completing your first challenge! I'll try to help you out with your question and a few other things:

  To create the overlay and hover, you want to have a container for your image first that contains your image and also an overlay <div> like this, and within the overlay, you'll have your icon:

  <div class="card__image">
     <img src="./images/image-equilibrium.jpg" alt="Equilibrium, a multicolor cube" />
     <div class="overlay">
        <img src="./images/icon-view.svg" alt="" class="">
     </div>
  </div>
  

  The overlay needs a position:absolute (which means the parent container also will need position:relative added). The CSS for the overlay can look something like this:

  .card__image .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: hsla(178deg, 100%, 50%, 0.5);
    opacity: 0;
    display: grid;
    place-content: center;
    transition: opacity 200ms ease-in-out;
  }
  .card__image .overlay img {
    width: 3rem;
    height: 2rem;
  }
  .card__image .overlay:hover {
    opacity: 1;
  }
  

  I see that the images also aren't showing up; that's because in your src attribute for the <img>, you'll need to add a dot and slash to indicate that the image folder is in the same directory, as in src="./images/image-equilibrium.jpg".

  Right now, your site looks like it's got some padding issues; I'm guessing you were trying to center the component and ended up using padding. What I'd do is, remove all the paddings and margins where you're using percentages, remove the top paddings, and in your body tag write this to center everything:

  body {
    min-height: 100vh;
    display: grid;
    place-content: center;
  }
  

  Once you clean up the image links and fix the padding and centering, the component should look a lot better even without the hover for now. My solution is here if you want to check it out.

  Hope this helps, and keep going!

  Marked as helpful

  0