nft-preview-card

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋🏻, regarding your comment:

  Consider using a cyan color with transparency for the background and that way I think you can solve it easily by rearranging the properties a bit, like this:

  .image_container::before {
  content: url(icon-view.svg);
  position: absolute;
  inset: 0;
  background: hsla(178, 100%, 50%, 0.5);
  opacity: 0;
  transition: opacity 2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  
  .image_container:hover::before {
  opacity: 1;
  }
  

  Basically, move the icon to the ::before element and give it full opacity on hover.

  Let me know if it worked : )

  Regards,

  Marked as helpful

  0

  ---

  

  Dessidy•300

  @DessidyPosted over 1 year ago

  Thanks I created another :root color with lower opacity than the first cyan like you said cant believe all I had to do was that and to make the opacity: 1; thanks again Will submit the corrected one soon, help me check out that one @fernandolapaz

  1