NFT preview card component

Community feedback

• 

  Hana•960

  @Hanka8Posted over 2 years ago

  Hi txosca.

  You provided a creative solution for hovering the image. However, I think its better solution to use pseudo-elements ::before and ::after. This way the hover effect will always appear over the image. You can check out my codepen to study ::before/::after here. Try adding the class for the div containing the image and use something like the code below.

  Also I dont think its a good idea to mix in-line and external css in one project. It creates a big mess.

  I hope this helps!

  .div-image {
    position: relative;
  }
  
  .div-image:hover::after {
    content:"";
    position: absolute;
    inset: 0;
    border-radius: 15px;
    background-color: hsla(178, 100%, 50%, 0.7);
  }
  
  .div-image:hover::before {
    content:"";
    position: absolute;
    inset: 0;
    background-image: url(images/icon-view.svg);
    background-repeat: no-repeat;
    background-position: center;
    z-index: 100;
  }
  

  Marked as helpful

  1

  ---

  

  txosca•70

  @txoscaPosted over 2 years ago

  @Hanka8 Hi Hana!!! Thank you very much for taking time to go through my code! I must confess that I was really overwhelmed with this challenge, as I started learning exactly one month ago and did not know how to do it the right way. I'll look carefully the solution that you gave me and will definitely check your codepen to study the solutions! Thank you again!!!

  0