Static div over slider

[asanti]

Hi everyone!,
I’m currently using the LayerSlider and i want to know if it is possible to create an static div with the slides changing in the background, this is what i’m working on (the blue background with the text is what needs to be static):

http://s27.postimg.org/bkhvsrrxv/Captura_de_pantalla_2014_06_20_a_la_s_12_01_22.png

Thanks!

[Paulie_D]

Yes,

What have you tried so far?

[asanti]

Hi Paulie, nothing yet,
I’m newbie in css
I’m kind of lost here, any clues?

[Paulie_D]

Well, you must have something if you are using the slider…

[asanti]

yes paulie,
i have only the slides,

this is the web, http://goo.gl/B56zPG

MOD EDIT – non-function HTML removed

[Paulie_D]

I would suggest that you try and recreate that in Codepen.io.

Most of use don’t like having to use developer tools to rummage around other sites to see what’s going on.

[asanti]

thanks for your advice, i’m getting closer to my goal!,

http://s30.postimg.org/5cbe5yl35/Captura_de_pantalla_2014_06_30_a_la_s_12_56_21.png

this is my css,

background: #084272;
height: 400px;
position: absolute;
left: 320px;
width: 337px;
z-index: 8;
zoom: 1;
opacity: 0.9;

i’m currently using bootstrap, is there a way to make this div responsive? When i play with the browser size to different screens the div gets messy

[Paulie_D]

I would suggest that you try and recreate that in Codepen.io.

[asanti]

thanks paulie, a stupid question, should i paste all the css and js files used in the .html file?

[asanti]

would this help? i can´t get the map behing in codepen,

codepen…

[asanti]

Hi everyone this where i am right now,

Codepen example…

how can i make the text and blue caption responsive?

thanks i’m in a hurry!

[Alan C]

Well you would use percentages to size things, or possibly vw units if you don’t care about total acceptance. Then just keep resizing the browser and check on phones ect using media queries to change it where needed.

But something like this would get you started

.blue-caption {
    height: 100%;
    position: absolute;
    left: 50%;
   margin-left: -15%;
    width: 30%;
}

[asanti]

Thanks Alan, however, the responsive feature is not working, i manage to create this code in css to get the blue box responsive as the image,

Codepen example

The thing is that if i use a slider instead of a static image, when it slides the blue box and it contents hiddes behind the slider,

Codepen example 2

How can i solve this?

Thanks!

[Author]

Posts