Text in front of Carousel

[edgrbnz]

A video could be a solution for you. Not perfect in terms of maintainability but a similar kind of splashpage recently was discussed in this topic.

[mariusjopen]

Dear @julianmeisen
you solution was not too bad. Even though it is a workaround…

It will need some CSS magic of course. But possible.

We will write down the feature to place text on to of a carousel now.

Best!

Marius

[julianmeisen]

Dear @edgrbnz,

many thanks, I will probably solve it as suggested with a video.

Dear @mariusjopen,

yes, that would be great—thanks!

Best,

Julian

[edgrbnz]

@mariusjopen Text on top of a carousel would be a great feature!

But how about going one step further and also allow the use of carousels as backgrounds?

[mariusjopen]

Dear @edgrbnz
we again agree :-)

Best!

Marius

[cyan_00FFF]

@mariusjopen Hi, has there been any solution to put text in front of a carousel yet?
I am trying to use the carousel as a full width / height slider and it would be super nice to have some info in front of it on bottom left of my screen.
thanks!
robert

[mariusjopen]

Dear @cyan_00FFF
not yet. Except you want to use CUSTOM CSS.

Best!

Marius

[cyan_00FFF]

@mariusjopen Thanks for the reply! I would totally use custom css but I can't figure out how to add a different z-index for example and then work in the lay interface to add content (means my page editor still won't allow adding a text in front of the slider then). sorry, I don't know how to describe the problem any better.

[mariusjopen]

Dear @cyan_00FFF
try position fixed and a ridiculous high z-index.

Best!

Marius

[chuckbanal]

hello @mariusjsopen
would you be so kind as to post a css snippet of how this could be done?
Ive tried this but text only disappears:

.free {
position: fixed;
z-index: 999999999;
}

[mariusjopen]

Dear @chuckbanal
can you post a link?

Best!

Marius

[aaalex]

Hello! I'd love to know how I can place text in front of a picture-carousel with CSS.

Thanks! :)

[mariusjopen]

Dear @aaalex
you can offset elements in the gridder that they move on top of each other.
You can also use CUSTOM CSS and z-index.
Best!
Marius

[TE]

hi @mariusjopen could you please advice on how to apply the CUSTOM CSS in this case?

Best

T

[TE]

@mariusjopen Hi Again,

I also tried the offset option however then I have still a scrollable chunk under the carousel which I dont want to have. How to tackle this?

Thx

T

[Richard]

Dear @TE

The goal is to have a carousel with an area of text that sits over the top? :)

If so, i have created a simple example to get you in the right direction, i hope i can help.

Let's create a carousel with a text block below it in the Gridder:

Right click the text element to give it a Custom Class or ID - in my case i gave it a Class called "Special"

Then we can target this Text element with Custom CSS using this 'special'

In 'Lay Options - Custom CSS & HTML" We can add some Custom CSS to the Area at the top of the page:

Adding some code like this:

.special{
    margin-top: -140vh;
    z-index: 99;
}

And start to play around with some Basic CSS to suit your needs!

Also something to help you:
https://laytheme.com/documentation.html#custom-css-styling

Have a wonderful day and Good Luck! all the basic CSS you need is just a google away :)

Best
Richard

[TE]

Dear Richard

Thanks for the help. I have tried your workaround and it did works however it didn't solve the problem of the blank space left below the carousel (where I have inserted the text block in the editor).

[Richard]

Dear @TE

Sorry for my answer, it didn't provide the correct solution.

This code below should work without adding any extra length to your page:

.special {
    transform: translateY(-40vh);
    z-index: 99;
}

Let me know how you go! :)
Have a wonderful day & thank you for using Lay Theme

[TE]

@Richard-K Thanks for the help. However this didnt work and resulted in the text box not being translated to the top nor removing the gap.

Are you certain this is the right fix?

Note the I have written custom css to make the carousel full screen. Perhaps this interferes with the recent css code you wrote me?
here is my current custom css (i renamed 'special' as 'text_overlay'):

*img.carousel-lazy-img.h100.lazyloaded {
height: 100vh;
width: 100vw;
object-fit: cover;
}

.carousel-full {
height: 100vh;
}

.carousel-full .lay-carousel-wrap {
height: 100% !important;
}

.carousel-full img.h100 {
object-fit: cover;
height: 100vh !important;
width: 100%;
}

.text_overlay{
margin-top: -120vh;
z-index: 99;
}*

[Richard]

Dear @TE

Thanks for the update!
Apologies for my delay, are you able to post a link to your website and then i can make sure it fits :)

*img.carousel-lazy-img.h100.lazyloaded {
height: 100vh;
width: 100vw;
object-fit: cover;
}

.carousel-full {
height: 100vh;
}

.carousel-full .lay-carousel-wrap {
height: 100% !important;
}

.carousel-full img.h100 {
object-fit: cover;
height: 100vh !important;
width: 100%;
}

.text_overlay{
margin-top: -120vh;
z-index: 99;
}*

Best wishes and a great day
Richard