NFT Preview Card Component Main Solution

Community feedback

• 

  Alex•660

  @al3xbackPosted almost 3 years ago

  Hi Eric!

  Try add this to your style.

  .hero-img { position: relative; }

  .hero-img::after { content: ""; position: absolute; width: 100%; height: 100%; inset: 0; background: hsl(178, 100%, 50%, 60%) url(--your-icon-view-url--) no-repeat center; z-index: 1; transition: opacity 0.3s; opacity: 0; }

  .hero-img:hover::after { opacity: 1; }

  I hope those will help! :)

  Marked as helpful

  0

  ---

  

  Eric Tan•80

  @erictan86Posted almost 3 years ago

  @al3xback thank you

  0

  

  Eric Tan•80

  @erictan86Posted almost 3 years ago

  @lastcodeteam12 thank you

  0

  Account deleted

  @al3xback @al3xback

  "Simplest is the best"

  I had also such a problem you can use this simple code :

  .active-stats{ /* this is hover image*/ position:absolute; opacity:100%; padding:116px; margin:25px 0 0 0; background-color:rgba(0, 255, 255, 0.336); border-radius:8px; opacity:0%; } .active-stats:hover{ opacity:100%; transition:0.3s }

  the idea here is that you :

  . give hover image padding that cover equilibrium image (doesn't affect image dimensions).

  . make its background color cyan with less opacity (alpha) this makes white eye full opacity but its background don't.

  . then hide hover eye image with lowering it's opacity.

  . at hover bring back its opacity, with smooth transition.

  0