Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1093366

    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!

    #1093526

    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

    #1199778

    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, 7 months ago by sabsab.
    #1200019

    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

    #1419718

    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

    #1419785

    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

    #1420396

    Thank you Nikko, it works :)

    You can close this topic

    Best regards, Sabine

    #1420630

    Hi Sabine,

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

    Best regards,
    Nikko

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