0

I'm having trouble looking to prevent the "opacity" state of the parent div from being inherited by the child divs.

In this particular code, I was looking for the opacity to not affect the element buttons. In my original code I have multiple states using "radial-gradient" so I haven't had the necessary knowledge to adapt the code using the RGB solution, ::before pseudo element or the "position: relative" solution. I will be very grateful to anyone who can help me.

I attach an example code Code example in Stackblitz

Example

FJAL
  • 33
  • 4

3 Answers3

1

Because putting opacity on the parent all childs will be affected too, but with the current layout example you can just do a background opacity instead. here is the the modified css. From you stackblitz example:

.product-item {
  .product-item-content {
    border: 1px solid var(--surface-d);
    border-radius: 3px;
    margin: 0.3rem;
    text-align: center;
    padding: 2rem 0;
    background: transparent
      radial-gradient(circle at left bottom, #009eea 0%, #004186 100%);
    
    color: white;
    cursor: pointer;
    &:hover{
      background: transparent
      radial-gradient(circle at left bottom, #009eea80 0%, #00418680 100%);
    }
  }

  .product-image {
    width: 50%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  }
}

note that the 80 after you colors represent 50% opacity.

Also if you have other elements you want to give opacity you must add selectors for those as well within the hover selector.

Henrik Bøgelund Lavstsen
  • 1,451
  • 14
  • 27
  • First of all I want to thank you for the good answer, I was unaware that 80 after the colors represented 50% opacity. Your solution is the most optimal that I load at the moment, although I would like to know if there will be a way without having to add 80 after the colors since I have about 30 different color styles. – FJAL Jun 04 '23 at 03:37
  • you could probably use rgba() or hsla() colors instead to make the 50% more clear – Henrik Bøgelund Lavstsen Jun 04 '23 at 04:03
0

Create new empty div under buttons with opacity 0. On hover make it 0.5

I think that your approach will not work because of Cascading nature of CSS.

Dennis Liger
  • 1,488
  • 2
  • 13
  • 28
  • I tried that using position relative in the new div but since it is a carousel which adapts according to the responsive the values ​​of left and rigth positions changes so it didn't work for me. – FJAL Jun 04 '23 at 03:21
-1

How to make a radial gradient with transparency in css

I found this, looks like you can use RGBA for the gradient colors. If your background contains the transparency, you should be able to remove opacity.

Sarah
  • 132
  • 3