NFT Preview Card

Community feedback

• 

  Pablo•250

  @pablo-92Posted over 1 year ago

  Hi Abdul, nice work with the challenge! I've seen your code and looks like you haven't used a pseudoelement. For your specific question, I'd use an ::before pseudoelement. Of course there's tons of solutions for your issue, but pseudoelements are very useful, and fits perfectly with what you want to do.

  The ::before and ::after creates a child of the selected element (selected by the id or the class). You just have be sure the parent has width and height.

  Note that the ::before and ::after can't be applied to the <img> element. That's why I use it on the .img-top div and not on the .showcase-img

  So let's take a look:

  Your HTML:

  (Get rid of the div that contains the eye icon.)

  <div class="img-top">
  <img class="showcase-image" src="images/image-equilibrium.jpg" alt="showcase 
  image">
  </div>
  

  This could be it's CSS:

  .img-top {
  width: 300px;  /* this is just an example of it's size, you just let the one you have */
  height: 300px;
  position: relative;  /* the parent of the ::before must have position: relative */
  z-index: 0;  /* by default it's 0, but just to be sure */
  }
  
  .img-showcase {
  width: 100%;
  height: 100%;
  }
  
  .img-top::before {
  content: url(images/icon-view.svg);  /* this property adds the eye icon */
  width: inherit;
  height: inherit;
  border-radius: inherit;  /* the inherit value make the ::before to take the same value of it's parent, so, in this case it will have the same width, height and border-radius as .img-top */
  background: hsla(178, 100%, 50%, 0.5); /* background with .5 of opacity so it can be like 'semi-transparent' */
  display: flex;  /* flexbox to center the eye icon */
  align-items: center;
  justify-content: center;
  position: absolute;
  opacity: 0; /* this make the ::before to be invisible until you hover it  */
  transition: 0.2s ease-in-out; /* the transition property allows you to set the time the before will take to appear, and how, once you have hovered it */
  z-index: 1; /* this let the ::before to be over the .img-top div */
  }
  

  Now the most important, you need to add this to the CSS aswell:

  .img-top:hover::before { /* this just adds the :hover function to the ::before we have just created. So when its hovered, it's opacity turns to 1 and it appears */
  opacity: 1;
  cursor: pointer;
  }
  

  I hope this works for you (if not, just let me know and I'll try my best to help you out). You're doing great! Just keep going; don't give up. There's a lot more to learn! Also, if this helped you, be sure you understand how it works before you go on, it's very important.

  Marked as helpful

  1

  ---

  

  Abdul Rafay•70

  @Rafay3305Posted over 1 year ago

  Thank you so much for breaking down the problem and explaining it. @pablo-92

  0