How would I go about implementing the onclick animation seen on this Google login form?
As you click the button box, the placeholder text shrinks and moves to the top left and the button border forms around the text.
https://accounts.google.com/v3/signin/identifier?dsh=S906398310%3A1668018211534020&flowName=GlifWebSignIn&flowEntry=ServiceLogin&ifkv=ARgdvAv8SiraKrw6QlE0WDM_jQ_IMyyYjxsvr8JLQ_L2BGzFth9-H3ZsW5aunSdhTVq1iMWqAgCTtg
With pure CSS I would approach it like that:
<style>
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
top: -6px;
left: 0.5rem;
padding: 0.5rem;
font-size: 11px;
opacity: 1;
}
.inputText {
font-size: 14px;
width: 200px;
height: 35px;
outline: 1px!important;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 1rem;
transform: translateY(-50%);
top: 50%;
background: white;
transition: 0.2s ease all;
}
</style>
<div style="position:relative; display:inline;">
<input type="text" class="inputText" required/>
<span class="floating-label">Your email address</span>
</div>
That isn't a placeholder. Its just a label sitting absolute above an input field. There are 2 options.
First one is only html and css. But it only works if all input fields are required. So you cant send the formular if one is empty.
<style>
.wrapper {
width: 100%;
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper .your-label {
position: absolute;
}
#input:focus ~ .your-label,
#input:valid ~ .your-label {
background-color: yellow;
color: blue;
transform: translateY(-1rem);
scale: 0.8;
}
</style>
<body>
<div class="wrapper">
<input id="input" type="text" required />
<label class="your-label" for="input">Your Text</label>
</div>
</body>
Second one would be with js and you are able to send also forms that are empty.
<style>
.wrapper {
width: 100%;
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper .your-label {
position: absolute;
}
.your-label.active {
background-color: yellow;
color: blue;
transform: translateY(-1rem);
scale: 0.8;
}
</style>
<body>
<div class="wrapper">
<input id="input" type="text" />
<label class="your-label" for="input">Yourt Text</label>
</div>
</body>
<script>
const form_input = document.querySelectorAll("#input");
form_input.forEach((e) => {
e.addEventListener("focus", () => {
e.nextElementSibling.classList.add("active");
});
e.addEventListener("blur", () => {
if (e.value === "") {
e.nextElementSibling.classList.remove("active");
} else {
e.nextElementSibling.classList.add("active");
}
});
});
</script>
Related
.container3 {
padding: center;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.container3 .materiali {
padding: 8px 48px;
margin: 8px;
font-family: Baskerville;
font-size: 25px;
}
input[type="radio"] {
display: none;
}
label {
position: relative;
}
label::before {
content: "";
background: url("check-circle.svg");
background-position: center;
background-size: contain;
width: 32px;
height: 32px;
position: absolute;
left: -45px;
top: -1px;
transform: scale(0) rotateZ(180deg);
transition: all 0.4s cubic-bezier(0.54, 0.01, 0, 1.49);
}
input[type="radio"]:checked + label::before {
transform: scale(1) rotateZ(0deg);
}
label::after {
content: "";
border: 2px solid #27ae60;
width: 24px;
height: 24px;
position: absolute;
left: -42px;
top: 1px;
border-radius: 50%;
}
<div class="container3">
<h1>LOREM IPSUM</h1>
<div class="materiali">
<input name="lpselection" id ="lp-selection-0" value="whatever" type = "radio">
<label for="lpselection-0">whatever
</label>
</div>
<div class="materiali">
<input name="lpselection" id ="lp-selection-1" value="idk" type = "radio">
<label for="idk">idk
</label>
</div>
<div class="materiali">
<input name="lpselection" id ="lp-selection-2" value="iirc" type = "radio">
<label for="iirc">IIRC
</label>
</div>
<div class="materiali">
<input name="lpselection" id ="lp-selection-3" value="lastone" type = "radio">
<label for="lastone">lastone
</label>
</div>
</div>
Now I was trying to perform a transition on these radio buttons the same as I was performing a transition like this in the checkboxes (my previous post) however , again , transition wont work. Code , I suppose , doesn't have any problem , since I am using the same one for my checkboxes group and it works, however I'm afraid I havent probably ordered "input" and "label" correectly, even though they have to be right under each other, no ? What is going wrong here ?
Your culprit is syntax errors in your for and id attributes primarily. See example below.
I used a unicode checkmark for the example since don't have the svg (which you could encode to include directly into the css if you wanted by the way), any other minor changes were simply for the sake of example. Cheers.
.container3 {
padding: center;
/*height: 100vh;*/
display: flex;
flex-direction: column;
justify-content: center;
}
.container3 .materiali {
padding: 8px 48px;
margin: 8px;
font-family: Baskerville;
font-size: 25px;
}
input[type="radio"] {
display: none;
}
label {
position: relative;
cursor: pointer;
}
label:before {
content: "🗸";
z-index: 1;
color: red;
font-size: 2.5rem;
background: url("check-circle.svg") center / contain no-repeat;
width: 32px;
height: 32px;
position: absolute;
left: -40px;
top: -13px;
transform: scale(0) rotateZ(180deg);
transition: all 0.4s cubic-bezier(0.54, 0.01, 0, 1.49);
}
input[type="radio"]:checked + label:before {
transform: scale(1) rotateZ(0deg);
}
label:after {
content: "";
border: 2px solid #27ae60;
width: 24px;
height: 24px;
position: absolute;
left: -42px;
top: 1px;
border-radius: 50%;
}
<div class="container3">
<h1>LOREM IPSUM</h1>
<div class="materiali">
<input name="lpselection" id="lp-selection-0" value="whatever" type="radio">
<label for="lp-selection-0">whatever</label>
</div>
<div class="materiali">
<input name="lpselection" id="lp-selection-1" value="idk" type="radio">
<label for="lp-selection-1">idk</label>
</div>
<div class="materiali">
<input name="lpselection" id="lp-selection-2" value="iirc" type="radio">
<label for="lp-selection-2">IIRC</label>
</div>
<div class="materiali">
<input name="lpselection" id="lp-selection-3" value="lastone" type="radio">
<label for="lp-selection-3">lastone</label>
</div>
</div>
The transition doesn't work. I inspect a little bit, and I see that you put an image on label::before which it does not load. Second it's not the correct method, you should use ::checked on input and style with CSS. You put a transition on :before that is not triggered. You can use transition on :hover for example.
I'm trying to do a photo gallery. I have this code:
<head>
<style>
.thumb {
max-height: 171px;
border: solid 6px rgba(5, 5, 5, 0.8);
}
.box {
position: fixed;
z-index: 999;
height: 0;
width: 0;
text-align: center;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
opacity: 0;
}
.box img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}
.box:target {
outline: none;
width: 100%;
height: 100%;
opacity: 1;
}
.box:target img {
border: solid 17px rgba(77, 77, 77, 0.8);
}
.light-btn {
color: #fafafa;
background-color: #333;
border: solid 3px #777;
padding: 5px 15px;
border-radius: 1px;
text-decoration: none;
cursor: pointer;
vertical-align: middle;
position: absolute;
top: 45%;
z-index: 99;
}
.light-btn:hover {
background-color: #111;
}
.btn-close {
position: absolute;
right: 2%;
top: 2%;
color: #fafafa;
background-color: #92001d;
padding: 10px 15px;
border-radius: 1px;
text-decoration: none;
}
.btn-close:hover {
background-color: #740404;
}
</style>
</head>
<body>
<img class="thumb" src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<img class="thumb" src="https://images.unsplash.com/photo-1562657548-fcab42b43035?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=332&q=80">
<img class="thumb" src="https://images.unsplash.com/photo-1564249332652-bf435bb2d21f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=353&q=80">
<div class="box" id="img1">
prev
X
<img src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
next
</div>
<div class="box" id="img2">
prev
X
<img src="https://images.unsplash.com/photo-1562657548-fcab42b43035?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=332&q=80">
next
</div>
<div class="box" id="img3">
prev
X
<img src="https://images.unsplash.com/photo-1564249332652-bf435bb2d21f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=353&q=80">
next
</div>
</body>
But I want to add animation. I want the photos to come from the left when I click on "next" and from the right when I click on "prev", like a slider.
Is it possible to achieve it with CSS? For example with transform property? If not what script should I use?
You can do something like this with radio buttons. If you have a radio button at the top for each transition you want to make, you can use CSS to select on every radio button there is and add the CSS transitions as needed. Use <label>s instead of <a>s to check the radio buttons, and then make the actual radio buttons invisible. But this would take a lot of code and wouldn't scale very well. So if you plan on having more images, you have to add CSS for each on individually, which can be a lot of work.
Here is a quick example putting the images into a reel and sliding the whole thing side to side. It may not be exactly what you want, but it is much less code. It's at least a good starting place.
<head>
<style>
.thumb {
max-height: 171px;
border: solid 6px rgba(5, 5, 5, 0.8);
}
.reel-wrapper {
position: fixed;
z-index: 999;
height: 0;
width: 0;
text-align: center;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
opacity: 0;
overflow: hidden;
}
.reel {
position: absolute;
width: auto;
height: auto;
display: flex;
transition: left 1s ease-in-out;
}
#radio-close:not(:checked) ~ .reel-wrapper {
outline: none;
width: 100%;
height: 100%;
opacity: 1;
}
.box {
position: relative;
width: 100vw;
height: 100vh;
}
.box img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
border: solid 17px rgba(77, 77, 77, 0.8);
}
input[type="radio"] {
display: none;
}
#radio-img1:checked ~ .reel-wrapper .reel {
left: 0;
}
#radio-img2:checked ~ .reel-wrapper .reel {
left: -100vw;
}
#radio-img3:checked ~ .reel-wrapper .reel {
left: -200vw;
}
.light-btn {
color: #fafafa;
background-color: #333;
border: solid 3px #777;
padding: 5px 15px;
border-radius: 1px;
text-decoration: none;
cursor: pointer;
vertical-align: middle;
position: absolute;
top: 45vh;
z-index: 99;
}
.light-btn:hover {
background-color: #111;
}
.btn-close {
position: absolute;
right: 2%;
top: 2%;
color: #fafafa;
background-color: #92001d;
padding: 10px 15px;
border-radius: 1px;
text-decoration: none;
}
.btn-close:hover {
background-color: #740404;
}
.btn-prev {
left: 5vw;
}
.btn-next {
right: 5vw;
}
</style>
</head>
<body>
<input id="radio-close" type="radio" name="gallery-nav" checked>
<input id="radio-img1" type="radio" name="gallery-nav">
<input id="radio-img2" type="radio" name="gallery-nav">
<input id="radio-img3" type="radio" name="gallery-nav">
<label for="radio-img1"><img class="thumb" src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"></label>
<label for="radio-img2"><img class="thumb" src="https://images.unsplash.com/photo-1562657548-fcab42b43035?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=332&q=80"></label>
<label for="radio-img3"><img class="thumb" src="https://images.unsplash.com/photo-1564249332652-bf435bb2d21f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=353&q=80"></label>
<div class="reel-wrapper">
<div class="reel">
<div class="box" id="img1">
<label for="radio-img3" class="light-btn btn-prev">prev</label>
<label for="radio-close" class="btn-close">X</label>
<img src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<label for="radio-img2" class="light-btn btn-next">next</label>
</div>
<div class="box" id="img2">
<label for="radio-img1" class="light-btn btn-prev">prev</label>
<label for="radio-close" class="btn-close">X</label>
<img src="https://images.unsplash.com/photo-1562657548-fcab42b43035?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=332&q=80">
<label for="radio-img3" class="light-btn btn-next">next</label>
</div>
<div class="box" id="img3">
<label for="radio-img2" class="light-btn btn-prev">prev</label>
<label for="radio-close" class="btn-close">X</label>
<img src="https://images.unsplash.com/photo-1564249332652-bf435bb2d21f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=353&q=80">
<label for="radio-img1" class="light-btn btn-next">next</label>
</div>
</div>
</div>
</body>
Typically this kind of thing would be easier to do with JavaScript. You could just keep track of which image you are looking at, and then on clicking a button toggle the right classes to make CSS do the actual animation. It is much easier to manage for scale. But pure CSS solutions are always more fun.
I am trying to bring some hidden text into view when a radio checkbox is checked. I cant quite work out why the :checked styling is not applying once the label is checked. I think i am being really daft but just cant work out what is going on.
Could anyone lend some advice?
.wrap__wrapper {
width: 400px;
margin: 0 auto;
}
.wrap {
position: relative;
overflow: hidden;
}
.wrap__radio--input {
display: none;
}
.wrap__inner {
width: 300%;
left: 0;
transition: all 1s;
}
.wrap__slides {
float: left;
width: 33.333%;
}
.wrap__text {
font-size: 16px;
text-align: center;
}
.wrap__button {
font-size: 1.8rem;
cursor: pointer;
text-align: center;
display: block;
}
.wrap__radio--input:checked~.wrap__inner {
transition: all 1s;
background: red;
left: -100%;
}
<div class="wrap__wrapper">
<div class="wrap">
<input type="radio" class="wrap__radio--input" id="slide--1">
<label for="slide--1" class="wrap__button">next slide</label>
<div class="wrap__inner">
<div class="wrap__slides">
<p class="wrap__text">slide1</p>
</div>
<div class="wrap__slides">
<p class="wrap__text">slide2</p>
</div>
</div>
</div>
</div>
Your element need to be positionned so you have to set position property to relative, absolute or fixed on .wrap__inner to be able to use left property. You cannot update position of static element.
.wrap__wrapper {
width: 400px;
margin: 0 auto;
}
.wrap {
position: relative;
overflow: hidden;
}
.wrap__radio--input {
display: none;
}
.wrap__inner {
position:relative;
width: 300%;
left: 0;
transition: all 1s;
}
.wrap__slides {
float: left;
width: 33.333%;
}
.wrap__text {
font-size: 16px;
text-align: center;
}
.wrap__button {
font-size: 1.8rem;
cursor: pointer;
text-align: center;
display: block;
}
.wrap__radio--input:checked~.wrap__inner {
transition: all 1s;
background: red;
left: -100%;
}
<div class="wrap__wrapper">
<div class="wrap">
<input type="radio" class="wrap__radio--input" id="slide--1">
<label for="slide--1" class="wrap__button">next slide</label>
<div class="wrap__inner">
<div class="wrap__slides">
<p class="wrap__text">slide1</p>
</div>
<div class="wrap__slides">
<p class="wrap__text">slide2</p>
</div>
<div class="wrap__slides">
<p class="wrap__text">slide3</p>
</div>
</div>
</div>
</div>
You can use the :before or :after pseudo-elements to toggle the previous and next text, apply the position property different from the default value of static to the .wrap__inner div and most importantly change the input type="radio" to input type="checkbox" to be able to toggle the checkbox state:
.wrap__wrapper {
width: 400px;
margin: 0 auto;
}
.wrap {
position: relative;
overflow: hidden;
}
.wrap__radio--input {
display: none;
}
.wrap__inner {
position: relative; /* any value other than default */
width: 300%;
left: 0;
transition: all 1s;
}
.wrap__slides {
float: left;
width: 33.333%;
}
.wrap__text {
font-size: 16px;
text-align: center;
}
.wrap__button {
font-size: 1.8rem;
cursor: pointer;
text-align: center;
display: block;
}
/* added */
.wrap__button:after {
content: "next";
}
.wrap__radio--input:checked + .wrap__button:after {
content: "previous";
}
/***/
.wrap__radio--input:checked ~ .wrap__inner {
transition: all 1s;
background: red;
left: -100%;
}
<div class="wrap__wrapper">
<div class="wrap">
<input type="checkbox" class="wrap__radio--input" id="slide--1">
<label for="slide--1" class="wrap__button"></label>
<div class="wrap__inner">
<div class="wrap__slides">
<p class="wrap__text">slide1</p>
</div>
<div class="wrap__slides">
<p class="wrap__text">slide2</p>
</div>
</div>
</div>
</div>
Note: Like I wrote in the comment, this only works for two slides.
I'm trying to create a CSS animation to move the clicked button (actually, the whole DIV that it's contained in) to the center. Each button is in a Div and I'm having trouble figuring out how, using one css class, to get any of the buttons to move to the center.
I've tried a variety of ways in the css, but haven't been able to do it where the other buttons don't move.
A codepen is here.
If you run the code and click the "DIV0" button, it moves to the center. (Click the button again to reset.) When you click any of the other buttons, I want them to go to the same spot as where the "DIV0" button went.
Update: I need to set up the DIVs/Buttons programmatically (passing the "divs" array to the HTML so that ng-repeat builds the layout). The size of the "divs" array may vary, so doing this method automates the building of the layout. Also, the div needs to take up 50% of the width and height so that it arrays out a 2-divs-across matrix on the screen. And each div will be fully filled with an image and text. I'm trying to move the full contents of the div to the center, not just the button.
so my layout may look like:
DIV0 DIV1
DIV2 DIV3
or just:
DIV0 DIV1
DIV2
Here is another codepen. http://codepen.io/furnaceX/pen/BKjyEp/
This one gets all the buttons to the right location, but the centering won't animate. Any ideas?
angular.module('myApp', [])
.controller("ctrl", ['$scope', function($scope) {
$scope.divs = [{id: 0, center: false}, {id: 1, center: false},
{id: 2, center: false}, {id: 3, center: false}];
$scope.fade = false;
$scope.go = function(div) {
if (!$scope.fade) {
div.center = true;
console.log("click again to reset");
$scope.fade = true;
} else {
div.center = false;
$scope.fade = false;
}
}
}])
html, body {
height: 100%;
width: 100%;
}
.block {
text-align: center;
width: 50%;
height: 50%;
float: left;
}
.center {
transition:0.5s linear all;
transform: translate(50%,50%);
top: 50%;
left: 50%;
//position: relative;
}
.fadeout {
transition:0.5s linear all;
opacity: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div class="container" ng-controller="ctrl">
<div ng-repeat="div in divs" class="block">
<div ng-class="{center: div.center, fadeout: fade*!div.center}">
<button ng-click="go(div)">DIV{{ div.id }}</button>
</div>
</div>
</div>
</div>
Pure CSS solution using checkbox (seems to be a button, but that's a checkbox undercover):
updated with 4 buttons
body {
width: 100%;
height: 100vh;
margin: 0px;
background: honeydew;
}
label > input {
display: none;
}
#button0 {
position: absolute;
line-height: 45px;
font-weight: bold;
text-align: center;
display: inline-block;
height: 50px;
width: 50px;
border: 2px dashed black;
box-sizing: border-box;
left: 0;
right: 0;
margin: auto;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
opacity: 0.5;
}
label > input ~ .button {
cursor: pointer;
position: absolute;
line-height: 45px;
font-weight: bold;
text-align: center;
display: inline-block;
height: 50px;
width: 50px;
border: 2px solid crimson;
box-sizing: border-box;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
user-select: none;
-webkit-user-select: none;
}
label > input ~ #button1 {
left: 0;
top: 0;
background: gold;
}
label > input ~ #button2 {
left: calc(100% - 50px);
top: calc(100% - 50px);
background: yellowgreen;
}
label > input ~ #button3 {
left: calc(100% - 50px);
top: 0;
background: skyblue;
}
label > input ~ #button4 {
left: 0;
top: calc(100% - 50px);
background: tomato;
}
label > input:checked ~ #button1, label > input:checked ~ #button2, label > input:checked ~ #button3, label > input:checked ~ #button4 {
left: calc(50% - 25px);
top: calc(50% - 25px);
border: 2px solid black;
-webkit-transition: all 3s ease-in-out;
transition: all 3s ease-in-out;
}
<div id=button0 class=button>target</div>
<label>
<input type="checkbox" name="run" value="click" />
<div id=button1 class=button>click</div>
</label>
<label>
<input type="checkbox" name="run" value="click" />
<div id=button2 class=button>click</div>
</label>
<label>
<input type="checkbox" name="run" value="click" />
<div id=button3 class=button>click</div>
</label>
<label>
<input type="checkbox" name="run" value="click" />
<div id=button4 class=button>click</div>
</label>
Add z-index to center class because your other divs are covering your center button. When you click again you don't click the center button you click the sibling div.
I was wondering how can I get the heading element to flow under the slider instead of on top and behind the slider. In other words how can I get the heading or any other element to flow normaly below the slider.
Here is the link to the Jsfiddle https://jsfiddle.net/1kg7s473/
HTML
<form class="sliders">
<input type="radio" name="slider-choice" id="first-slider" checked />
<div class="slider-container">
<div class="slider">
<p>Some Random Text...</p>
</div>
<div class="nav">
<label for="second-slider" class="prev"></label>
<label for="second-slider" class="next"></label>
</div>
</div>
<input type="radio" name="slider-choice" id="second-slider" />
<div class="slider-container">
<div class="slider">
<p>Even Some More Random Text...</p>
</div>
<div class="nav">
<label for="first-slider" class="prev"></label>
<label for="first-slider" class="next"></label>
</div>
</div>
</form>
<h2>Some more random text</h2>
CSS
.sliders {
width: 600px;
position: relative;
}
.sliders input{
display: none;
}
.slider {
position: absolute;
opacity: 0;
width: 600px;
transform: scale(0);
transition: all .6s ease-in-out;
}
.nav label {
margin-top: 65px;
width: 85px;
display: none;
position: absolute;
opacity: 0;
cursor: pointer;
transition: opacity .2s;
color: black;
font-size: 6em;
text-align: center;
background-color: rgba(100, 100, 100, .6);
Z-index: 99999;
}
.sliders:hover .nav label{
opacity: 0.5;
cursor: pointer;
}
.sliders:hover .prev:hover, .sliders:hover .next:hover{
opacity: 1;
}
.nav .next{
right: 0;
}
.prev:before{
content: '\2770';
}
.next:before{
content: '\2771';
}
input:checked + .slider-container .slider{
opacity: 1;
transform: scale(1);
transition: opacity 2s ease-in-out;
}
input:checked + .slider-container .nav label{
display: block;
}
p{
padding: 100px 20px;
width: 560px;
text-align: center;
background: #dae1ef;
}
Put the h2 inside a div like this:
<div class="h2Container" >
<h2>Some more random text</h2>
</div>
Add the following CSS to the class h2Container
.h2Container
{
position: relative; padding-top: 25%;
}
Here is the Demo for the same.
Remove the styles on the .sliderclass and attribute them to the slides container instead with these changes too:
.slider-container {
width: 600px;
position: relative; //do not use absolute on this
top: 0;
height: 235px; //you must have a height defined or 100%
display: inline-block; //this reserves the entire area (width X Height) and automatically places the next element below the defined height
}
See the working DEMO