I want to overlay the jumbotron component over the carousel to get a sort of website heading. What should I implement to get this working?
You're not being very descriptive or giving us any code, however if I could assume your asking how to overlay two elements, you use the z-index property in CSS
Related
So I basically have the exact same code as this code pen i found (with different images but same css and html), but what im not being able to do is add the rest of my page under that parallax effect
I have a normal page with the following structure:
<section class="position-relative bg-blah-blah">
<divs>
</divs>
</section>
.
.
.
<section class="position-relative bg-blah-blah">
<divs>
</divs>
</section>
So where should i put the rest of my page after that parallax code so that the parallax hides under my first section and the rest of the pag follows
Im sorry if this is not the correct way to make a question, its my first time
with the same CSS you can't put the flow of the page right behind it because the CSS is aligned to display absolute. So it doesn't matter where you put your own code the first 2000px will disappear behind the cover. You could start to adjust the CSS and change from display absolute to display relative e.g. the class "parallax". But your problem here is not the HTML flow but the CSS.
I need to create a pictures slider that looks like this:
The pictures need to lay one on each other on such way that the user could see the first picture on full size and some fraction form the others. Is there any way to do it on css only? Is there any available addon on the internet that give some solution for that?
You can use bootstrap-carousel for it and change the position and styles of the carousel indicators by applying your custom classes to them. Here's the link for bootstrap carousel.
I am looking to create a left nav bar like the one on the Treehouse site here:
http://teamtreehouse.com/library
The main thing I am trying to replicate is the links tooltip that slides out/fades in beside the icon. Looking at the source, I believe thats done through CSS? correct me if I'm wrong.
Also, I noticed they have svg classes on the links, are they just for site responsiveness and not really related to the function of the links/tooltip?
Thanks for any help on this and please let me know if I can provide any other info.
For the bar itself simply have floated div extended to 100% height and set it's position to fixed.
The tooltips that pop out can either be done with javascript or CSS.
For javascript or jQuery, there are numerous tooltip libraries that will give you the same functionality. In CSS you can add a hover state that shows the div. Either one of these approaches will work.
For the CSS solution see this related question: Using only CSS, show div on hover over <a>
The SVG class on these from what I can tell is actually the icon itself. SVG is a neat format that lets you apply font styling to images. If you look at the bootstrap framework icons you'll see this is how they are displayed. I'm guessing that the same technique is being used here.
I'm looking to create an html/css gallery with no spacing inbetween each gallery element. Just for some context, all the gallery elements are the same size and are list items contained in a ul inside a div. I already have media queries set up to readjust the rest of the site and the gallery image sizes. However the actual elements are inline-block so they adjust themselves. I want to know how I can make the elements so they animate to their new positions instead of just snapping to them. Adding the standard transition values to the css of any gallery related item didn't seem to work. I'm not sure if I need to change my markup for this to work but any help would be appreciated!
Animation can not be achieved with css alone. You will need some javascript. I would advise you to have a look at jquery.
I have this code: jsfiddle
I want it to look like this, but I do not want the surrounding div. I want to have the form overlay ontop of an image tag, but to look like the second link.
So how can i make the login box over the image without having the image as a background
In order to do what you want you must position the login box absolutely and set a z-index so that it will display properly. Here is a link: link
Personally I prefer to use a container with a background for this sort of thing, as positioning some thing absolutely can be complicated in the rest of the layout. Either way, this link should do what you want.