Apply opacity in cover or group block without affecting child or text

  • rod

    (@nomadarod)


    4 years ago

    Hi,

    I am trying to add transparency to a cover block without changing the opacity of the child elements: group block or text.

    I found out that opacity might be inherited to child elements and that a solution for it might be using background-color RGBA values instead, as explained here: https://stackoverflow.com/questions/5770341/i-do-not-want-to-inherit-the-child-opacity-from-the-parent-in-css but it doesn’t seem to apply when added through custom css; setting opacity works but for some reason setting the rgba values for background-color of a cover or group block doesn’t; even when I used !important

    Any ideas on how to apply this?
    thanks
    Rod

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello @nomadarod ,

    Do you mean something like this?

    View post on imgur.com

    Here’s the CSS code I used as an example. Please tweak and refactor as needed.

    

.wp-block-group.alignwide.apropos_partie1.has-white-color.has-text-color.has-background {
    background-color: rgba(0,0,0,0.4) !important;
}

    Shout if you have any questions ??

    Thread Starter rod

    (@nomadarod)

    Hi @mlchaves ; It worked! Thanks!

    I do have questions, but about the next steps of what I have in mind. I am trying to apply an idea of a “red color filter” over the blue and purple containers, as I did using Wix: https://monosnap.com/file/SJ42eJ2f9LAMMtKvoZ2izxuffiFQ0k

    I tried using z-index as in this tutorial, but then I have a difficulty to place the containers where I want. Any ideas on how to do this?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Apply opacity in cover or group block without affecting child or text’ is closed to new replies.