Responsive NFT Card using only HTML and CSS

Community feedback

• 

  Nayan Bhatt•980

  @freaky4wrldPosted about 1 year ago

  Hey there, here's what you can do to achieve the hover effect on your image......

  • first of all I would recommend you to wrap your image in a div, there's no harm in that.....
  • then create a new div that's going to give you the hover effect, give it similar width and height styling just like the nft-img
  • then you can add a background color to the newly created div, particularly using an rgba value and a background-image view-icon(eye-svg) and having a z-index of negative value

  .img-overlay:{
       background-image: url(eye-icon.svg);
       background-color: rgba-value;
       width: [similar to nft-img];  
       height: [similar to nft-img];
       z-index: -1;
  }
  

  • give your nft-img a z-index of zero #nft-img{ z-index: 0 }
  • on hover over the parent-element of the image and the overlay...... you can increase the z-index of the overlay, i.e.

  .img-overlay:hover{
        z-index: [value greater than #nft-img] ;
  }
  

  I hope this works, I would recommend you to look for z-index CSS property......glad to help you :)

  0