Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Text in front of Carousel

    Addons
    carousel
    13
    33
    690
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J
      julianmeisen last edited by

      Dear Armin,

      I'm using an fullscreen autoplay carousel as an Intro page. The carousel is supposed to be in the background while there is an Text in the foreground. Although there is apparently no direct way to place text in front the carousel, I still managed to do it by offsetting text, which I placed in a row below, upwards in front the carousel. However, as this is obviously not a clean solution (position of text is not always centered but dependent on screen sizes/row below is still visible when you scroll down) I was wondering if you can think of a better way to put text over a carousel?

      Here's the Link: http://julianmeisen.com/intro

      Many thanks in advance!

      Best,

      Julian

      1 Reply Last reply Reply Quote 0
      • edgrbnz
        edgrbnz last edited by 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.

        ✦ ✦ ✦

        1 Reply Last reply Reply Quote 0
        • mariusjopen
          mariusjopen Global Moderator last edited by

          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

          www.mariusjopen.world

          1 Reply Last reply Reply Quote 1
          • J
            julianmeisen last edited by

            Dear @edgrbnz,

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

            Dear @mariusjopen,

            yes, that would be great—thanks!

            Best,

            Julian

            1 Reply Last reply Reply Quote 1
            • edgrbnz
              edgrbnz last edited by

              @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?

              ✦ ✦ ✦

              1 Reply Last reply Reply Quote 0
              • mariusjopen
                mariusjopen Global Moderator last edited by

                Dear @edgrbnz
                we again agree :-)

                Best!

                Marius

                www.mariusjopen.world

                1 Reply Last reply Reply Quote 0
                • C
                  cyan_00FFF last edited by

                  @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

                  1 Reply Last reply Reply Quote 0
                  • mariusjopen
                    mariusjopen Global Moderator last edited by

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

                    Best!

                    Marius

                    www.mariusjopen.world

                    C 1 Reply Last reply Reply Quote 0
                    • C
                      cyan_00FFF @mariusjopen last edited by

                      @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.

                      1 Reply Last reply Reply Quote 0
                      • mariusjopen
                        mariusjopen Global Moderator last edited by

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

                        Best!

                        Marius

                        www.mariusjopen.world

                        1 Reply Last reply Reply Quote 0
                        • C
                          chuckbanal last edited by

                          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;
                          }

                          1 Reply Last reply Reply Quote 0
                          • mariusjopen
                            mariusjopen Global Moderator last edited by

                            Dear @chuckbanal
                            can you post a link?

                            Best!

                            Marius

                            www.mariusjopen.world

                            1 Reply Last reply Reply Quote 0
                            • A
                              aaalex last edited by

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

                              Thanks! :)

                              1 Reply Last reply Reply Quote 0
                              • mariusjopen
                                mariusjopen Global Moderator last edited by

                                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

                                www.mariusjopen.world

                                T 1 Reply Last reply Reply Quote 0
                                • T
                                  TE last edited by

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

                                  Best

                                  T

                                  1 Reply Last reply Reply Quote 0
                                  • T
                                    TE @mariusjopen last edited by

                                    @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

                                    1 Reply Last reply Reply Quote 0
                                    • Richard
                                      Richard Global Moderator last edited by

                                      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:

                                      Screen Shot 2020-11-13 at 5.20.49 PM.png

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

                                      Screen Shot 2020-09-14 at 2.50.29 PM.png

                                      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:

                                      Screen Shot 2020-09-14 at 2.51.54 PM.png

                                      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

                                      1 Reply Last reply Reply Quote 0
                                      • T
                                        TE last edited by

                                        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).

                                        1 Reply Last reply Reply Quote 0
                                        • Richard
                                          Richard Global Moderator last edited by

                                          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

                                          T 1 Reply Last reply Reply Quote 0
                                          • T
                                            TE @Richard last edited by

                                            @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;
                                            }*

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Before you post

                                            Use the Search Feature. Maybe there is already a solution to your issue.

                                            1. Update Lay Theme and all Lay Theme Addons
                                            2. Disable all Plugins
                                            3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                                            4. Now see if your problem solved itself
                                            5. Go here, see if your problem is listed here:
                                            Troubleshooting

                                            When you post:
                                            1. Post a link to where the problem is
                                            2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                                            Thanks!

                                            Online Users

                                            H
                                            S
                                            S

                                            Recent Topics

                                            • S

                                              New fade-in / opacity bug?

                                            • A

                                              Unable to update lay theme / to login wp admin

                                            • A

                                              New button feature not available

                                            • S

                                              Theme crashed - because of Polylang?

                                            laytheme.com