Some CSS not work after deployment

[tech_guy]

Hi,
I added following CSS to a react app. Locally, It works properly. But after deployment, It does not work.

.b-button {
  opacity: 0;
}

.n-card:hover .b-button {
  opacity: 100%;
  transition-duration: 0.3s;
  transition-timing-function: ease-in;
}

textarea {
  resize: none;
}

Could anyone let me know what the issue is?

[coelmay]

Hi @tech_guy

Can you please share the URL where this issue is evident.

[tech_guy]

Hi @coelmay
Let me share it here.
https://musical-bombolone-be2d44.netlify.app/

[coelmay]

What specific element?

[tech_guy]

@coelmay
Sorry I didn’t get

[coelmay]

What element on the page does the CSS apply to?

[tech_guy]

Hi @coelmay
If you meant the page it is the “/” page.
if you meant the component that css applied, it is the card component which is in the first page. It should be like below when it hover.

(Buy button should be shown when it hover)

[coelmay]

@tech_guy

.b-button {
  opacity: 0;
}

The class on the element is not b-button, it is buy-button. The opacity is set to 0 which means it is invisible. Set it to 1

@tech_guy

.n-card:hover .b-button {
  opacity: 100%;
  transition-duration: 0.3s;
  transition-timing-function: ease-in;
}

Don’t use percent values as these are often changed to 0 during build. Use decimal values, e.g. 50% → 0.5, 65% → 0.65.

[tech_guy]

Thank you. That opacity set to 1 is worked. (btw I already used buy-button on my code.)

[hillary]

Thanks for sharing that solution, @coelmay! Happy building, @tech_guy!