NFT card

Community feedback

• 

  Ted Rinquest•440

  @climb512Posted over 1 year ago

  You did it!! Looks great! I see that you used a screenshot image of the "eye icon" rather than the .svg in the images folder, which is fine if you prefer how the .png looks. The main reason to prefer an .svg over a .png is that it will scale up without losing its sharpness, but that isn't an issue here.

  Great job :)

  Marked as helpful

  0
• 

  Ted Rinquest•440

  @climb512Posted over 1 year ago

  Looks good!

  You've got the basics down, now let's tackle the positioning concepts that make the hover effects possible.

  The hover effect on the main image is done in css by using "position" and "opacity".
  So, first create an empty <div> the same size as the large image, center the "eye" icon inside of it, setting a cyan background and then, importantly, setting its opacity to 0. This makes it invisible. Then you use :hover on the <div> to change opacity to 1 when the mouse hovers over it. Something like this:

  HTML:
  <div class="image-group">
  <img class="image__img" src="images/image-equilibrium.jpg" alt="NFT Equilibrium #3429">
  <div class="image__overlay">
  <img src="images/icon-view.svg" alt="eye icon" class="hover-eye">
  </div>
  </div>
  
  CSS:
  .image-group {
  position: relative;
  }
  .image__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;  // this means 100% of the containing element, the .image-group div
  height: 100%; // this means 100% of the containing element, the .image-group div
  background: hsla(178, 100%, 50%, 0.5); //cyan color
  opacity: 0;
  .image__overlay:hover {
  opacity: 1;
  }
  

  As for margin vs padding, you can search for info on the "box model" of css, and there are a million resources that explain it in detail. Basically, your "content", like, say, a picture or some text, sits at the center of your element (a <div>, a <p>, or whatever). This element can have padding, then possibly a border and finally margin around it, in that order, moving outwards from the center. Padding and margin can both be used to space out elements, but experimentation will show you that they are actually not the same. For instance, a background color will show up in the padding, but not in the margin. Please check out the "box model" for a full explanation.

  I hope this helps! Keep coding!!

  Marked as helpful

  0

  ---

  

  beth•110

  @beth1207Posted over 1 year ago

  this was an eye opener thanks a lot. I appreciate, hope you'll review the updated one.@climb512

  0