NFT preview card component

Community feedback

• 

  Seungwan Kim•160

  @polzakPosted over 1 year ago

  Hi Paul,

  You've done a great job. I see you did a beautiful design.
  Just one thing, please let me tell you how you can make the icon-view.jpg image that you set as background image visible.

  First, the image file path:

  You can access image files with ./images/....jpg in index.html, but your style.css file is not in the root directory now. The stylesheet's path is ./app/scss/style.css; so you will be able to access image files from there, with ./../../images/icon-view.jpg: you need to come up twice, then come down into the images folder again.

  Second, the tag you applied 'opacity: 0.3' to.

  You set the background image on the img tag, and applied the opacity(transparent) to the same img tag: it will not work because the img tag has both its own image and background image at once. Solution: move the class .image-equilibrium up to its parent div in index.html. Then create a style .image-equilibrium:hover img, and move opacity: 0.3 into that. Now when you hover the div tag(its dimension will be the same as img tag), the opacity: 0.3 will work just on the image, and the background image on the div tag will show up.

  You can see my code:

  (index.html)

  <main class="card">
  <div class="image_equilibrium">
  <img src="./images/image-equilibrium.jpg" alt="picture of equilibrium card">
  </div>
  <h1>Equilibrium #3429</h1>
  

  (style.css)

  .image_equilibrium:hover {
  background-image: url("./../../images/icon-view.svg");
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
  /* move the opacity out into the below one */
  }
  
  .image_equilibrium:hover img {
  opacity: 0.3;
  }
  

  Marked as helpful

  0