Tagged: overlapping columns
-
AuthorPosts
-
April 22, 2019 at 4:49 pm #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!
April 23, 2019 at 6:59 am #1093526Hey 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; }
Best regards,
IsmaelApril 1, 2020 at 3:12 pm #1199778Hi 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.
April 2, 2020 at 8:40 am #1200019Hi 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,
RikardSeptember 20, 2023 at 2:16 pm #1419718Hi,
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 #1419785Hi,
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,
NikkoSeptember 26, 2023 at 11:33 am #1420396Thank you Nikko, it works :)
You can close this topic
Best regards, Sabine
September 27, 2023 at 1:14 am #1420630Hi Sabine,
I’m glad that we could help you :)
Thanks for using Enfold and have a great day!Best regards,
Nikko -
AuthorPosts
- The topic ‘Overlapping columns with text and images’ is closed to new replies.