NFT card with the little avatar-hover effect

Community feedback

• 

  Corvida Raven•680

  @SheGeeksPosted almost 2 years ago

  Great work on achieving the design, Wedrussowo! Here are a few tips I have regarding your code that I hope can be helpful now and down the road.

  As a rule of thumb, header should always be outside of the main tag. It's best practice to put it right above main. The code you've written in header would be more appropriate for a div. Header is for nav links and introductions. This is an easy fix in your code - just change header to div. It shouldn't break anything to make this simple change right now.

  Take some time to dig into semantic HTML structures for best practices. Here's official documentation about main with a code example and a here's a visual of a typical webpage structure with these tags. This challenge doesn't really require a header, but other challenges will.

  As for your flexbox concerns, you can remove Flexbox on the .icon-view class and create a new ruling specifically for the icon with the following values to center it again:

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: unset;
  

  When using absolute positioning, you don't need flexbox. You may have to unset the width on the icon to reduce its size because you applied max-width:100% to all images in your header within .main-picture img. If you only target the first image instead of all images you won't need width:unset.

  It's not uncommon to use Flexbox a lot. I find that the better I structure my code, the less I have to turn to flexbox. Maybe in a future challenge you can also practice using CSS Grid, which is just as powerful as flexbox.

  Hope the feedback and links are helpful. Keep coding! :)

  Marked as helpful

  0

  ---

  

  Wedrussowo•80

  @WedrussowoPosted almost 2 years ago

  @SheGeeks

  First of all, thanks for the tips.

  I tried with your code and finally achieved the same effect as with flexbox.

  Here's the code, that allowed me to get this effect:

  .main-picture a {
      position: absolute;
      min-width: 100%;
      min-height: 100%;
      transition: all 0.7s;
  }
  
  .main-picture:hover a {
      background-color: hsla(178, 100%, 50%, 0.50);
      transition: 0.25s;
  }
  
  .main-picture:hover .icon-view {
      opacity: 1;
      transition: .25s;
  }
  
  .icon-view {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: unset;
      opacity: 0;
      transition: 0.7s ease-out;
  }
  

  Also, I had to remove class="icon-view" from the <a> tag and add it to <img> tag instead.

  It was a very good lesson for me. I understood better position absolute, and now I am more conscious on how to prevent unwanted inheritance in the future. But overall, definitely easier was to use flexbox in this case, at least for me. Maybe I complicated it to much, I don't know if this can be achived even easier without flexbox, but I tried my best!

  I also changed the <header> to <div>, like you said.

  Thank You very much for the feedback! Have good day. :)

  0

  

  Corvida Raven•680

  @SheGeeksPosted almost 2 years ago

  @Wedrussowo Glad the feedback could be helpful!

  0