Want text and image to be clearly visible but keep card background the same.

[twin tapir]

//colours you can map over
const colours = [
  ["163,24,207", "24,96,205"],
  ["2, 170, 176", "0, 205, 172"],
  ["251, 194, 235", "166, 193, 238"],
  ["255, 81, 47", "240, 152, 25"],
  ["225, 79, 173", "5, 117,230"],
];

[twin tapir]

Bump, any suggestions?

[rustic escarp]

You did not ask any question

[twin tapir]

Fair point. The text on my card is almost invisible. I’d like for it to be clearly visible.
And the image is being cropped by the wrapper

How could I fix this?

[rustic escarp]

send a sandbox

[twin tapir]

Sorry this is taking longer than I thought to get a sandbox working the same as my localhost...
Will post when I can!

https://codesandbox.io/s/colourcard-test-yzuj7y?file=/components/ColourCard.tsx

I haven't used this before - are you able to edit this @rustic escarp

[twin tapir]

I'm not sure what I'm doing wrong but can't seem to figure it out..

[rustic escarp]

Please use the template – https://codesandbox.io/s/mantine-template-9ze89?file=/src/App.tsx:0-6
Next.js sandboxes are very hard to work with

[twin tapir]

https://codesandbox.io/s/priceless-stonebraker-ht7ntn?file=/src/App.tsx

Hope that's ok

It seems the ```js
WebkitMaskBoxImage:
"-webkit-gradient(linear,left bottom,right top,from(transparent),color-stop(.5,rgba(0,0,0,.2)),to(#000));",

Is causing the issue by masking over the div and hiding the text. But I'm not sure if there is a way to achieve the same look otherwise.

[rustic escarp]

https://codesandbox.io/s/jovial-goodall-ji5ic2?file=/components/ColourJug.tsx

[twin tapir]

You're freakishly good, what about the image getting stuck contained inside?

and when I say freakishly good, what did I do wrong

😂

[rustic escarp]

Add absolute position to it if you want it to overflow the container

[twin tapir]

The jug (image) already has position absolute

@rustic escarp I'm also unsure how to using 'createStyles/useStyles' to do things on group hover

Hopefully there's an example of that