Question 181811 in Html Question posted in
Some basic documentation can be found here.

Html – How to prevent parent div opacity from affecting child divs in a Primeng Carousel?

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

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search