NFT preview card component

Community feedback

• 

  Uwuigbe Julius Osemwengie•380

  @Call4juliusPosted 12 months ago

  I noticed you didn't get the image:hover; state?

  Do you need any assistance?

  Marked as helpful

  0

  ---

  

  Sohidul Islam Ananto•80

  @anonto42Posted 12 months ago

  i'm add that img:hover but that was not warking at this time , that is my bad luck and thanks for responce @Call4julius

  0

  

  Uwuigbe Julius Osemwengie•380

  @Call4juliusPosted 12 months ago

  @anonto42 you were suppose to use a ::before or ::after pseudo-element on the image.

  In the pseudo-element add a url(images/vision-icon.svg) as content.

  Give the pseudo-element a display: grid;, position: absolute; and place-content: center also give the pseudo-element a background-color: hsl(--- -- --) and opacity: 0; and of course you will need to set the position of the pseudo-element. For ease just use inset: 0; that is top, right, bottom, left set to 0.

  Finally write a new declaration like this image:hover::before {opacity: 0.5;}

  N.B: The ::before and ::after pseudo-element is like a div that you don't write in your html mark-up. You can style it just like you style every other div with position, width and height, background-color etc.

  0