NFT Preview Card styled using CSS

Community feedback

• 

  imad•3,330

  @imadvvPosted over 2 years ago

  Hi Jovaughn Bennett, there are many ways to archive like this effect, one of them is to use opacity:0 in both the icon and bg overlay and than change that to opacity:1 in hover .

  I actually took some time to look at your code, and I take some note heplfully you find some of them useul.

  you can set this values hoverimg {opacity : 0}, .equimg{cursor: pointer;} , .equilibrium{width: 100%} , .icon{opacity:0} and than

  .hoverimg:hover {
    opacity: 0.8;
  }
  .hoverimg:hover .icon {
    opacity: 1;
  }
  

  also check for spell for some classes, Hope this help and happy coding!

  Marked as helpful

  1
• 

  Danny Gomes•120

  @dannygomesPosted over 2 years ago

  Hey! I also struggled with the hover image effect. I used a pseudo element to get it done, so I use the hover selector and then use the :after selector on that very same selector to create the pseudo element as the image is hovered. Then it's just a matter of setting the position absolute on the pseudo element and on the parent (I hope I explained myself correctly).

  The more experienced developers helped me out with this on the Slack community in the #help channel, if you need help you should join, I really recommend it!

  0
• 

  Davisson Stefesson•40

  @DAST-87Posted over 2 years ago

  Eu utilizei POSITION - ABSOLUTE nas imagens. Depois é só organizar quem fica por cima ou por baixo com Z-INDEX.

  0