We Keep Coding

collapse and expand multiple boxes

I'm using below collapse/expand code. it's work, but when I use the code to another text both are expand at the same time. For example, the below "+" icon I clicked on the first one the box expand and in the same time the second box expand without clicking in the icon.
please advise me.
here is the code:
$(".js-expand").click(function () {
$(".js-expand").toggleClass('is-expanded');
$(".figcaption").toggleClass('is-expanded');
});
.wrapper {
position: relative;
width: 330px;
top: 40%;
}
.figcaption {
position: absolute;
top: 50%;
left: 1%;
z-index: 4;
background: #84BD00 !important;
width: 30px;
height: auto;
max-height: 30px;
border-radius: 50%;
max-width: 220px;
box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.3);
transition: all 0.75s cubic-bezier(0.215, 0.61, 0.355, 1);
transition-delay: 0.5s;
}
.figcaption:before {
display: block;
position: absolute;
width: 0;
height: 0;
bottom: 99.5%;
left: 0;
content: '';
z-index: 3;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #84BD00;
overflow: hidden;
transform: translateY(100%);
transition: all 0.75s;
transition-delay: 0.5s;
}
.figcaption.is-expanded {
top: 50%;
left: 1%;
width: 300px;
max-height: 1000px;
border-radius: 0;
max-width: 300px;
box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.3);
transition-delay: 0s;
}
.figcaption.is-expanded:before {
left: 30px;
transform: translateY(0%);
transition-delay: 0s;
}
.figcaption-icon {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 1%;
width: 30px;
height: 30px;
font-size: 18px;
z-index: 5;
color: #fff;
transform: rotate(0deg);
cursor: pointer;
border-radius: 50%;
transition: all 0.75s cubic-bezier(0.215, 0.61, 0.355, 1);
transition-delay: 0.5s;
}
.figcaption-icon.is-expanded {
left: 80%;
transform: rotate(405deg);
transition-delay: 0s;
}
.caption-title {
font-family: sans-serif;
position: relative;
background: #323232;
color: #fff;
text-transform: uppercase;
display: inline-block;
padding: 5px 7.5px;
margin-bottom: 10px;
transform: translateX(-15px) translateY(10px);
opacity: 0;
white-space: nowrap;
transition: all 0.5s;
transition-delay: 0s;
}
.figcaption.is-expanded .caption-title {
opacity: 1;
white-space: nowrap;
transition-delay: 0.5s;
}
.caption-copy-wrap {
opacity: 0;
overflow: hidden;
max-height: 1000px;
transition: all 0.5s;
transition-delay: 0s;
background: #84BD00 !important;
border: none;
}
.figcaption.is-expanded .caption-copy-wrap {
opacity: 1;
white-space: normal;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-delay: 0.5s;
}
.caption-copy {
font-family: sans-serif;
margin: 0;
padding: 10px 20px 20px 20px;
font-size: 0.875rem;
line-height: 1.28571429;
text-align: justify;
}
li {
margin-bottom: 10px;
color: black;
}
<div class="col-lg-3 col-sm-3">
<div class="form-group">
<label class="bmd-label-floating">Primary Hazards</label>
<div class="wrapper">
<span class="figcaption-icon js-expand" title="Primary Hazards">&plus;</span>
<figcaption class="figcaption">
<div class="caption-title">Primary Hazards</div>
<div class="caption-copy-wrap">
<div class="form-control" data-toggle="collapse" data-target="#txtP4" contenteditable="false" disabled id="txtP4" style="background: #84BD00 !important; border: none;">
<ul class="caption-copy">
<li>Unsafe working area</li>
<li>Personal Injury </li>
<li>Not conducting the joint site inspection </li>
<li>Expire receiver/ issuer certificate </li>
<li>EWrong equipment might be selected </li>
<li>Miss communication </li>
</ul>
</div>
</div>
</figcaption>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-3">
<div class="form-group">
<label class="bmd-label-floating">Primary Hazards</label>
<div class="wrapper">
<span class="figcaption-icon js-expand" title="Primary Hazards">&plus;</span>
<figcaption class="figcaption">
<div class="caption-title">Primary Hazards</div>
<div class="caption-copy-wrap">
<div class="form-control" data-toggle="collapse" data-target="#txtP4" contenteditable="false" disabled id="txtP4" style="background: #84BD00 !important; border: none;">
<ul class="caption-copy">
<li>Unsafe working area</li>
<li>Personal Injury </li>
<li>Not conducting the joint site inspection </li>
<li>Expire receiver/ issuer certificate </li>
<li>EWrong equipment might be selected </li>
<li>Miss communication </li>
</ul>
</div>
</div>
</figcaption>
</div>
</div>
</div>

you can add the below code for your jquery function
$('.js-expand').each(function() {
$(this).on('click', function() {
$(this).next().toggleClass('is-expanded')
});
})

hover on image with overlay slide in effect but without any revese effect

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
as above code when we hover over the image it gets overlay effect but on mouse leave, I don't want this reverse effect. when mouse leave happens I just want to hide overlay and show the image as at starting.how can I achieve this.
I have tried using javascript but nothing worked for me.help me.
ref code:link

Move the transition to the hover state
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
}
.container:hover .overlay {
height: 100%;
transition: .5s ease;
/* here */
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="http://www.fillmurray.com/460/300" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>

3 part distributed right side advertisment issue

I'm looking for information.
Does someone ever heard about this kinda add?
I'm trying programming an add which opening itself when you click on it, but I'm stuck.
I found a solution if you wanna an opening style add like 2 distributed parts but not for 3 or more side, so if it's possible, so someone can help me find out how can I solve this problem?
This is the html file
I tried the 3rd "distribution" but that stucked under the 2nd so I deleted that part of the code.
.cards {
width: 300px;
height: 600px;
margin: auto auto;
}
.card-toggle {
display: none;
}
.card {
display: block;
width: 180px;
height: 180px;
position: relative;
-webkit-perspective: 900;
margin: auto auto;
cursor: pointer;
}
.card:hover .face {
-webkit-transition: all 0.3s ease-out;
margin: auto auto;
}
.face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: visible;
-webkit-transition: all 0.5s ease-out;
-webkit-transform-origin: 0 0;
}
.front {
-webkit-transform: rotateY(0deg);
z-index: auto;
-webkit-backface-visibility: hidden;
}
.inner-left {
-webkit-transform: rotateY(-10deg);
z-index: 2;
}
.inner-left>img {
-webkit-transform: rotateY(180deg);
}
.inner-right {
-webkit-transform: rotateY(0deg);
z-index: 1;
}
.card:hover .front,
.card:hover .inner-left {
-webkit-transform: rotateY(-15deg);
}
.card-toggle:checked+.card .front,
.card-toggle:checked+.card .inner-left {
-webkit-transform: rotateY(-180deg);
}
.card-toggle:checked+.card .inner-right {
-webkit-transform: rotateY(0deg);
}
<div class='cards'>
<input type="checkbox" id="card-toggle" class="card-toggle" value="selected">
<label class='card' for="card-toggle">
<div class='front face'>
Font view of the advertisement.
</div>
<div class="inner-left face">
<img class="inner-left" width=300px height="600px" src='http://picanimal.com/wp-content/uploads/2017/07/cats-cat-play-hide-cute-pictures-hd-1366x768.jpg' />
</div>
<div class="inner-right face">
<img class="inner-left" width=300px height="600px" src='http://picanimal.com/wp-content/uploads/2017/07/cats-cat-play-hide-cute-pictures-hd-1366x768.jpg' />
</div>
</label>
</div>

This version makes it open more like a book:
.cards {
width: 300px;
height: 600px;
margin: auto auto;
}
.card-toggle {
display: none;
}
.card {
display: block;
width: 180px;
height: 180px;
position: relative;
perspective: 900;
margin: auto auto;
cursor: pointer;
}
.card:hover .face {
transition: all 0.3s ease-out;
margin: auto auto;
}
.face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: visible;
-webkit-transition: all 0.5s ease-out;
-webkit-transform-origin: 0 0;
}
.front {
/*-webkit-transform: rotateY(180deg);*/
z-index: auto;
-webkit-backface-visibility: hidden;
}
.inner-left {
/*-webkit-transform: rotateY(-180deg);*/
z-index: 2;
}
.inner-left>img {
/*-webkit-transform: rotateY(180deg);*/
}
.inner-right {
/*-webkit-transform: rotateY(180deg);*/
z-index: 1;
}
.card:hover .front,
.card:hover .inner-left {
transform: rotateY(180deg);
}
.card-toggle:checked+.card .front,
.card-toggle:checked+.card .inner-left {
transform: rotateY(180deg);
}
.card-toggle:checked+.card .inner-right {
transform: rotateY(-180deg);
}
<div class='cards'>
<input type="checkbox" id="card-toggle" class="card-toggle" value="selected">
<label class='card' for="card-toggle">
<div class='front face'>
Front view of the advertisement.
</div>
<div class="inner-left face">
<img class="inner-left" width=300px height="600px" src='http://picanimal.com/wp-content/uploads/2017/07/cats-cat-play-hide-cute-pictures-hd-1366x768.jpg' />
</div>
<div class="inner-right face">
<img class="inner-left" width=300px height="600px" src='http://picanimal.com/wp-content/uploads/2017/07/cats-cat-play-hide-cute-pictures-hd-1366x768.jpg' />
</div>
</label>
</div>

inserting a text box at top of the page

I have been trying this for a lot of time. How can I add a bigger text box on the top of the page ie it would be outside the div tag of the button which would be clicked
https://jsfiddle.net/Lx3rtLx0/2/
For eg on clicking one of the four emerging images it should display
a text box on the top of the page like the one shown below
I want the code given to arrive on the page on clicking one of the images. I.e. when you click on one of the images(jsfiddle) ..a text box(code given) should appear. on different clicks diff content.
#adbox {
width: 800px;
height: 150px;
border-width: 0;
border-color: red;
background-color:grey;
}
#adbox .adbox1 {
width: 200px;
height: 50px;
border-width: 0;
border-color: red;
float:left;
background-color:lightblue;
margin:0px 0px 0px 300px;
}
#adbox .adbox2 {
width: 200px;
height: 50px;
border-width: 0;
border-color: red;
float:right;
background-color:red;
margin:0px 60px 0px 0px;
}
.clear{
clear:both;
}
<!DOCTYPE html>
<html>
<head>
<title>BOX</title>
</head>
<body>
<div align=center><div id="adbox">
<h1><br> xyz sent you a hug</br></h1>
<div class="adbox1">
<br>Send a Hug Back</br>
</div>
<div class="adbox2">
<br>Ack | Dis</br>
</div>
<div class="clear"/>
</div></div>
</body>
</html>

Not super clear on your question, do you need to add an input to the jsfiddle in your question? or the code you have listed in your question? If it is in the jsfiddle, just add this to the top of the code:
<body>
<section id="header">
<div class="inner">
<div>
<input type="text" style="position:absolute; width:300px;" />
</div>
Otherwise, the attribute position:absolute should work out for you, if it isn't in the right place, add attributes like top:0; left:0, and that will put your input in the top left despite anything else in your code.

Simple, on your click button add the code as in https://jsfiddle.net/Lx3rtLx0/6/
var input = document.createElement('input'); // if you want label just change inpput to label
input.type='text';
input.value = 'hugs or whatever';
document.body.insertBefore(input, document.body.firstChild);
So the full JS become
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
var input = document.createElement('input'); // if you want label just change inpput to label
input.type='text';
input.value = 'hugs or whatever';
document.body.insertBefore(input, document.body.firstChild);
});
});

You can use a data- attribute on your clickable divs to link them with a specific element (a textbox in this case). For example:
<div class="btn btn-icon" title="Send a hug to Mohammed" data-adbox="adbox1">
In the click handler, we can retreive this attribute and show the element with id adbox1.
Full example:
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
});
$(".btn.btn-icon").click(function() {
$('.adbox').hide();
$('#' + $(this).data('adbox')).show();
});
$('.adbox').click(function() {
$(this).hide();
});
});
html,
body {
height: 100%;
overflow: hidden;
}
.absolute-center,
.menu,
.menu .btn .fa,
.menu .btn.trigger .line {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.menu {
width: 5em;
height: 5em;
}
.menu .btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
z-index: -10;
cursor: pointer;
-webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
transition: opacity 2s, z-index 1s, -webkit-transform 1s;
transition: opacity 2s, z-index 1s, transform 1s;
transition: opacity 2s, z-index 1s, transform 1s, -webkit-transform 1s;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu .btn.trigger {
opacity: 1;
z-index: 100;
cursor: pointer;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
content: url("http://i.stack.imgur.com/Yse7Q.jpg");
}
.menu .btn.trigger:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.menu .rotater {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.menu.active .btn-icon {
opacity: 1;
z-index: 50;
}
.rotater:nth-child(1) {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu.active .rotater:nth-child(1) .btn-icon {
-webkit-transform: translateY(-12em) rotate(45deg);
transform: translateY(-12em) rotate(45deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(2) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu.active .rotater:nth-child(2) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-45deg);
transform: translateY(-12em) rotate(-45deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(3) {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.menu.active .rotater:nth-child(3) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-135deg);
transform: translateY(-12em) rotate(-135deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(4) {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-225deg);
transform: translateY(-12em) rotate(-225deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-225deg);
transform: translateY(-12em) rotate(-225deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.text-box {
text-align: center;
z-index: 3;
font-size: 18px;
font-weight: 900;
color: white;
padding-top: 30px;
opacity: 0;
-webkit-transition: all 0.5s ease;
/* Safari */
transition: all 0.5s ease;
}
.text-box:hover {
opacity: 1;
}
.adbox {
display: none;
position: absolute;
top: 10px;
width: 120px;
left: 50%;
margin-left: -70px;
background: grey;
padding: 10px;
color: white;
text-align: center;
border-radius: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div class="inner">
<div class="menu">
<div class="btn trigger">
<span class="line"></span>
</div>
<div class="icons">
<div class="rotater">
<div class="btn btn-icon" title="Send a hug to Mohammed" data-adbox="adbox1">
<p class="text-box">
Hello
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon" title="Send a kiss to Margaret" data-adbox="adbox2">
<p class="text-box">
This
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon" title="Wish Good Morning to your Family" data-adbox="adbox3">
<p class="text-box">
Doge
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon " title="Express your love" data-adbox="adbox4">
<p class="text-box">
Is
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="adbox" id="adbox1">
<h1>xyz sent you a hug</h1>
</div>
<div class="adbox" id="adbox2">
<h1>Send a Hug Back</h1>
</div>
<div class="adbox" id="adbox3">
<h1>Ack | Dis</h1>
</div>
<div class="adbox" id="adbox4">
</div>

Stop CSS animation with jQuery if i use <input>

Have two cards with back and front. But in card TWO back, not work. Because i click animation work all time.
Need function for stop animation,if i use input string in card TWO? but works if i use card not input string!
Thx all who help =)
$('.card').click(function(){
$(this).toggleClass('flipped');
});
input.form,
button {
font-family: 'Roboto Slab', serif;
font-weight: 300;
font-size: 16px;
border: 0;
padding: 3px 5px;
border-radius: 3px;
color: #000;
}
.animation {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.card-container{
position: relative;
float: left;
width: 48%;
height: 260px;
margin: 30px 0 30px 4%;
background: #fff;
/* Set the depth of the elements */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card-container:first-child {
margin-left: 0;
}
.card {
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
/* Set the transition effects */
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
transition: transform 0.4s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
}
.formItem:first-child {
margin-top: 20px;
}
.card .back label {
display: inline-block;
width: 70px;
text-align: left;
}
.card .front {
background: #000000;
}
.card .back {
background: #8bc34a;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card-container:first-child .card .front {
background: #000000;
}
.card-container:first-child .card .back {
background: #8bc34a;
}
.cardTitle {
font-size: 1.4em;
line-height: 1.2em;
margin: 0;
}
.content {
padding: 4%;
font-weight: 100;
text-align: left;
}
button.btnSend {
display: inline-block;
min-width: 100px;
padding: 3px 5px;
margin-top: 10px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
color: #8bc34a;
background: #fff;
border: 0;
border-radius: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Footer -->
<div id="footer" class="container-fluid">
<footer>
<div class="container">
<div class="wrapper-cards">
<!--Cards ONE-->
<div class="card-container">
<div class="card">
<div class="front">
<h2>
About
</h2>
</div>
<div class="back">
<div class="content">
<h3 class="cardTitle">
Nice
</h3>
<p>
Thx for read this.
</p>
</div>
</div>
</div>
</div>
THIS PROBLEM <!--Cards TWO-->
<div class="card-container">
<div class="card">
<div class="front">
<h2>
Contact Us!
</h2>
</div>
<div class="back">
<div class="content">
<h3 class="cardTitle">
Send a mail!
</h3>
<p>
We wait letters from you.
</p>
<form>
<div class="formItem">
<label>
Name:
</label>
<input class="form" type="text" name="name" value="name" maxlenght="25" />
</div>
<div class="formItem">
<label>
Email:
</label>
<input class="form" type="text" name="mail" value="mail" maxlenght="35" />
</div>
<button class="btnSend">
Send
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
1.

One possible solution is to check if there are focused elements in the card:
$('.card').click(function() {
$(this).not(':has(:focus)').toggleClass('flipped');
});
$('.card').click(function() {
$(this).not(':has(:focus)').toggleClass('flipped');
});
input.form,
button {
font-family: 'Roboto Slab', serif;
font-weight: 300;
font-size: 16px;
border: 0;
padding: 3px 5px;
border-radius: 3px;
color: #000;
}
.animation {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.card-container {
position: relative;
float: left;
width: 48%;
height: 260px;
margin: 30px 0 30px 4%;
background: #fff;
/* Set the depth of the elements */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card-container:first-child {
margin-left: 0;
}
.card {
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
/* Set the transition effects */
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
transition: transform 0.4s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
}
.formItem:first-child {
margin-top: 20px;
}
.card .back label {
display: inline-block;
width: 70px;
text-align: left;
}
.card .front {
background: #000000;
}
.card .back {
background: #8bc34a;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-container:first-child .card .front {
background: #000000;
}
.card-container:first-child .card .back {
background: #8bc34a;
}
.cardTitle {
font-size: 1.4em;
line-height: 1.2em;
margin: 0;
}
.content {
padding: 4%;
font-weight: 100;
text-align: left;
}
button.btnSend {
display: inline-block;
min-width: 100px;
padding: 3px 5px;
margin-top: 10px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
color: #8bc34a;
background: #fff;
border: 0;
border-radius: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Footer -->
<div id="footer" class="container-fluid">
<footer>
<div class="container">
<div class="wrapper-cards">
<!--Cards ONE-->
<div class="card-container">
<div class="card">
<div class="front">
<h2>About</h2>
</div>
<div class="back">
<div class="content">
<h3 class="cardTitle">Nice</h3>
<p>
Thx for read this.
</p>
</div>
</div>
</div>
</div>
THIS PROBLEM
<!--Cards TWO-->
<div class="card-container">
<div class="card">
<div class="front">
<h2>Contact Us!</h2>
</div>
<div class="back">
<div class="content">
<h3 class="cardTitle">Send a mail!</h3>
<p>
We wait letters from you.
</p>
<form>
<div class="formItem">
<label>
Name:
</label>
<input class="form" type="text" name="name" value="name" maxlenght="25" />
</div>
<div class="formItem">
<label>
Email:
</label>
<input class="form" type="text" name="mail" value="mail" maxlenght="35" />
</div>
<button class="btnSend">
Send
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>