Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 26, 2018 at 1:12 pm #1037636
    michaelH

    Hi guys

    I have a question on my following issue I could not find a solution for yet (also not with z-index):
    So I got a column with the following CSS:

    .column-white-background {
background: white;
opacity: 0.7;
color: black;
padding: 15px 15px 15px 15px;
}

    The text on it looks nice, but since I have an image in the same block as well it is also transparent with an opacity 0.7.
    How can I achieve to make the image itself not transparent at all and display it in its “original” form with opacity 1?

    I also tried to assign a separate CSS class to the image, but that did not help either.

    Thanks in advance
    Michael

    November 28, 2018 at 9:45 am #1038376
    Rikard

    Hey Michael,

    Where can we see the result you are getting?

    Best regards,
    Rikard

    November 28, 2018 at 3:05 pm #1038543
    michaelH

    Hi Rikard

    Please find a link to a screenshot showing the situation in the private content section.

    Thanks a lot
    Michael

    November 30, 2018 at 10:04 am #1039260
    michaelH

    Added the following CSS now:

    .column-white-background {
    background: white;
    opacity: 0.7;
    color: black;
    padding: 15px 15px 15px 15px;
    position: static !important;
    z-index: -1 !important;
}
.not-transparent-image {
    z-index: 5 !important;
    position: static !important;
}

    Still does not work for some reason, I have no clue what is wrong…

    December 1, 2018 at 8:40 am #1039541
    Rikard

    Hi,

    Thanks for the screenshot and update, could you post a link to where we can inspect the actual element also please?

    Best regards,
    Rikard

    December 2, 2018 at 1:04 pm #1039908
    michaelH

    Hi Rikard

    I was able to solve it in the meantime with some help. This is what I changed:

    .column-white-background {
background-color: rgba(255,255,255,0.7);
color: black;
padding: 15px 15px 15px 15px;
}

    Please close this thread now.

    Best,
    Michael

    December 2, 2018 at 2:25 pm #1039948
    Rikard

    Hi Michael,

    Great, glad you found a solution and thanks for sharing. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Half transparent column: image should not be transparent’ is closed to new replies.