NFT preview card component

Community feedback

• 

  John Mirage•1,590

  @john-miragePosted over 1 year ago

  Hello,

  I dont really understand your question, but i can say that you can have a background image and a background-color on the same element, you center the image and yes you use a transparent color with hsla or rgba css function so no need of opacity in this one.

  0

  ---

  

  chirikchekmen•240

  @skyrimerPosted over 1 year ago

  @john-mirage, the hover effect on image consists of two parts: semitransparent cyan mask on top of the image and the view icon on top of everything. What I did, was using ::before for the mask and ::after for the icon, which change their opacity when the mouse is over the image. My question was whether it is possible to unit the mask and the image into one element. If yes, then how?

  0

  

  John Mirage•1,590

  @john-miragePosted over 1 year ago

  @skyrimer like this ??

  0

  

  chirikchekmen•240

  @skyrimerPosted over 1 year ago

  @john-mirage, yes, but if you look back at the challenge. We need to see the content inside the div. In your case (in the codepen), the background-color is not half transparent.

  0

  

  John Mirage•1,590

  @john-miragePosted over 1 year ago

  @skyrimer yes, my bad, i forgot the background color, i fixed the solution :)

  0