NFT Preview Card on different screens

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Jjumba4, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  Here's how you can add the hover effect:

  Container needed to position the overlay. Adjust the width as needed

  .container {
    position: relative;
    width: 100%;
    max-width: 340px;
  }
  

  Make the image to responsive

  .image {
    width: 100%;
    height: auto;
  }
  

  The overlay effect (full height and width) - lays on top of the container and over the image

  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-color: red;
  }
  

  When you mouse over the container, fade in the overlay icon

  .container:hover .overlay {
    opacity: 1;
  }
  

  The icon inside the overlay is positioned in the middle vertically and horizontally .icon { color: white; font-size: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; }

  When you move the mouse over the icon, change color

  .icon-eye:hover {
    color:  hsl(178, 100%, 50%, 0.5);;
  }
  

  👨‍💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • Apply the recommendations that the other member mentioned, before moving on to the next challenge, so you do not make the same mistakes.

  • To center you content to your page, add the following to your Body Element:

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

  • Your “NFT image” needs an Alt Tag. It should describe what the image is; it need to be readable. Assume you’re describing the image to someone.

  • The incorrect font-family is being used. You want to look at your "style-guide" to download the correct one.

  • To perfectly align the icon and text, you will want to the icon and text in a container and use display: flex and align-items.

  • Adjust the padding of the card to make it look more like the FEM example.

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  Marked as helpful

  0
• 

  Joel•20

  @Jjumba4Posted about 2 years ago

  I'm also failing to know why the preview in my desktop browser looks better than it appears in the solution here. Somebody help me figure this out please!!!

  0

  ---

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @Jjumba4

  It's a bug, they are still working on it.

  0