Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 22, 2019 at 4:49 pm #1093366
    williamslyd

    I am trying to follow various threads on this topic but they didn’t work.

    I would like to create overlap effect with text block in one column on the right overlapping an image on the left, so that the text is on top of the image.

    Thank you!

    April 23, 2019 at 6:59 am #1093526
    Ismael

    Hey williamslyd,

    Thank you for using Enfold.

    Increase the z-index of the column that is supposed to overlap the other. You can use this css code.

    .overlapping-columns-left {
    z-index: 200;
}

    // https://kriesi.at/documentation/enfold/intro-to-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

    Best regards,
    Ismael

    April 1, 2020 at 3:12 pm #1199778
    sabsab

    Hi Ismael, I hope it’s fine to revive this thread.

    I am trying to achieve the same thing as williamslyd. Is it still the same procedure? Or is it better to do it with a negative margin? The provided code is not working anymore :(

    Thanks in advance, Sam

    EDIT Its working with: 

    .overlapping-columns {
	  position: relative !important; 
    left: -150px !important; 
    z-index: 10 !important;
}
    • This reply was modified 4 years, 8 months ago by sabsab.
    April 2, 2020 at 8:40 am #1200019
    Rikard

    Hi Sam,

    Great, I’m glad that you found a solution and thanks for the update. Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

    September 20, 2023 at 2:16 pm #1419718
    TakiwaSoulArt

    Hi,

    I have a question to the same thread. I wanted to overlapp one column to the left AND to the right with this code. But it does work only left:

    .overlapping-columns {
    position: relative !important;
    left: -100px !important;
    right: -100px !important;
    z-index: 100 !important;
    }

    What is wrong?

    Thank you for your answer and have a nice day

    Sabine

    September 21, 2023 at 12:15 am #1419785
    Nikko

    Hi,

    Please add this class name to the last column right-column
    Then try to replace your code with this CSS code in Quick CSS:

    #top .overlapping-columns {
    position: absolute;
    z-index: 100;
    margin-left: 0;
    width: calc(29.333333333333332% + 400px);
    left: 50%;
    transform: translateX(-50%);
}

#top .right-column {
    float: right;
    margin-left: 0 !important;
}

    Best regards,
    Nikko

    September 26, 2023 at 11:33 am #1420396
    TakiwaSoulArt

    Thank you Nikko, it works :)

    You can close this topic

    Best regards, Sabine

    September 27, 2023 at 1:14 am #1420630
    Nikko

    Hi Sabine,

    I’m glad that we could help you :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Overlapping columns with text and images’ is closed to new replies.