NFT preview card component using Bootstrap

Community feedback

• 

  David Bedford•180

  @djbedfordPosted about 2 years ago

  Hey, your solution is looking great so far! For the opacity issue you mentioned you could try setting the background colour using rgba instead of opacity on the div. So on the "overlay" div remove the opacity attribute completely and replace the background-color attribute with 'background-color: rgba(0, 255, 247, 0);', you will also need to specifically set the opacity to zero of the image within the "overlay" div and then on hover change the background colour of the "overlay" div to half opacity with 'background-color: rgba(0, 255, 247, 0.5);' and the images opacity to 1. With these changes you will have the desired effect of the icon having a different opacity to its background. The reason you need to do it this way is because the opacity of the child element cannot be more than that of its parent.

  Marked as helpful

  1