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

The button to hide the block - cards does not work JS

There are cards, when you click on the checkmark, the card flies sideways, when you click on the cross, the card turns over to the correct answer. On this side there is a button, when you click on which the card flies to the side, as well as when you click on the checkmark. I have a problem with the last point. How to make it so that when you click on the button with the class next on the back of the card, the active card flies sideways? https://jsfiddle.net/kyen9gsw/
'use strict';
var quizcardContainer = document.querySelector('.quizcard');
var allCards = document.querySelectorAll('.flip-card');
var nope = document.getElementById('nope');
var love = document.getElementById('love');
var next = document.getElementById('next');
function initCards(card, index) {
var newCards = document.querySelectorAll('.flip-card:not(.removed)');
newCards.forEach(function (card, index) {
card.style.zIndex = allCards.length - index;
card.style.opacity = (10 - index) / 10;
});
quizcardContainer.classList.add('loaded');
}
initCards();
function createButtonListener(love) {
return function (event) {
var cards = document.querySelectorAll('.flip-card:not(.removed)');
var moveOutWidth = document.body.clientWidth * 0.3;
if (!cards.length) return false;
var card = cards[0];
card.classList.add('removed');
if (love) {
card.style.transform = 'translate(' + moveOutWidth + 'px, -900px) rotate(0deg)';
} else if (nope){
card.classList.toggle('do-flip');
document.querySelectorAll('next').onclick = function() {
card.style.transform = 'translate(' + moveOutWidth + 'px, 900px)';
};
}
initCards();
event.preventDefault();
};
}
var nopeListener = createButtonListener(false);
var loveListener = createButtonListener(true);
nope.addEventListener('click', nopeListener);
love.addEventListener('click', loveListener);
.quizcard {
width: 100vw;
height: 100vh;
overflow: hidden;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
position: relative;
opacity: 0;
-webkit-transition: opacity 0.1s ease-in-out;
transition: opacity 0.1s ease-in-out;
}
.loaded.quizcard {
opacity: 1;
}
.quizcard--status {
position: absolute;
top: 50%;
margin-top: -30px;
z-index: 2;
width: 100%;
text-align: center;
pointer-events: none;
}
.quizcard--status i {
font-size: 100px;
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
position: absolute;
width: 100px;
margin-left: -50px;
}
.quizcard_love .fa-check {
opacity: 0.7;
-webkit-transform: scale(1);
transform: scale(1);
}
.quizcard_nope .fa-remove {
opacity: 0.7;
-webkit-transform: scale(1);
transform: scale(1);
}
.quizcard--cards {
-webkit-box-flex: 1;
flex-grow: 1;
padding-top: 40px;
text-align: center;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: end;
align-items: flex-end;
z-index: 1;
}
.quizcard--buttons {
-webkit-box-flex: 0;
flex: 0 0 100px;
text-align: center;
padding-top: 20px;
}
.quizcard--buttons button {
border-radius: 50%;
line-height: 60px;
width: 60px;
border: 0;
background: #FFFFFF;
display: inline-block;
margin: 0 8px;
background: #000;
}
.quizcard--buttons button:focus {
outline: 0;
}
.quizcard--buttons i {
font-size: 32px;
vertical-align: middle;
}
.fa-check {
color: #089404;
}
.fa-remove {
color: red;
}
.flip-card {
display: inline-block;
width: 90vw;
max-width: 400px;
height: 70vh;
text-align: center;
margin: 50px auto;
position: absolute;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.do-flip {
-o-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.flip-card .flip-card-front, .flip-card-back{
width: 100%;
height: 100%;
position: absolute;
-o-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
-webkit-box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);
-moz-box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);
box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);
}
.flip-card .flip-card-front {
background: lightgreen;
border:1px solid grey;
}
.flip-card .flip-card-back {
background: lightblue;
border: 1px solid grey;
-o-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
height: 100%;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<div class="quizcard">
<div class="quizcard--cards">
<div class="flip-card">
<div class="flip-card-front"><p>Front1</p></div>
<div class="flip-card-back"><p>Back1</p><button class="next">flip</button></div>
</div>
<div class="flip-card">
<div class="flip-card-front"><p>Front2</p></div>
<div class="flip-card-back"><p>Back2</p><button class="next">flip</button></div>
</div>
<div class="flip-card">
<div class="flip-card-front"><p>Front3</p></div>
<div class="flip-card-back"><p>Back3</p><button class="next">flip</button></div>
</div>
<div class="flip-card">
<div class="flip-card-front"><p>Front4</p></div>
<div class="flip-card-back"><p>Back4</p><button class="next">flip</button></div>
</div>
<div class="flip-card">
<div class="flip-card-front"><p>Front5</p></div>
<div class="flip-card-back"><p>Back5</p><button class="next">flip</button></div>
</div>
</div>
<div class="quizcard--buttons">
<button id="nope"><i class="fa fa-remove"></i></button>
<button id="love"><i class="fa fa-check"></i></button>
</div>
</div>

While adding Events to a class in JS you should use getElementsByClassName instead of getElementById .
Try this code
document.getElementsByClassName('next').onclick = function() { document.getElementById('flip-card').classList.toggle('do-flip'); };

I wonder why i can't add picture to the .img class (through the css) and why the sign up button wont change to sign in when i click it [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I follow this youtube tutorial (https://www.youtube.com/watch?v=sy9OI-ndKnc). I don't understand HTML, CSS, and JS that much (to be honest i had no experience in it), but I really need this page to work. I think the .img-btn span.m-in should be the one responsible to translate the button when it get clicked(?).
document.querySelector('.img-btn').addEventListener('click', function()
{
document.querySelector('.cont').classList.toggle('s-signup')
}
);
#import url('https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700;800&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
*, *:before, *:after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.heading li,a,button{
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
text-decoration: none;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 10%;
background-color: #000000;
}
.heading .logo{
cursor: pointer;
height: 80px;
width: 80px;
transition: all 0.3s ease 0s;
-webkit-transition: image 0.2s ease-in-out;
transition: image 0.2s ease-in-out;
}
.navigation{
list-style: none;
}
.navigation li{
display: inline-block;
padding: 0px 20px;
}
.navigation li a{
transition: all 0.3s ease 0s;
}
.navigation li a:hover{
color: #0088a9;
}
.heading button{
padding: 9px 25px;
background-color: rgb(224, 173, 19);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.heading button:hover{
background-color: rgba(0,136,168,0.8);
}
.joinus{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: -webkit-linear-gradient(left, #000000, #FF0000);
font-family: 'Nunito', sans-serif;
}
.joinus input, button{
border: none;
outline: none;
background: none;
}
.cont{
overflow: hidden;
position: relative;
width: 900px;
height: 550px;
background: #fff;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.form{
position: relative;
width: 640px;
height: 100%;
padding: 50px 30px;
-webkit-transition: -webkit-transform 1.2s ease-in-out;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}
.joinus h2{
width: 100%;
font-size: 30px;
text-align: center;
font-family: 'Nunito', sans-serif;
}
.joinus label{
display: block;
width: 260px;
margin: 25px auto;
text-align: center;
}
.joinus label span{
font-size: 14px;
font-weight: 600;
color: #505f75;
text-transform: uppercase;
font-family: 'Nunito', sans-serif;
}
.joinus input{
display: block;
width: 100%;
margin-top: 5px;
font-size: 16px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(109, 93, 93, 0.4);
text-align: center;
font-family: 'Nunito', sans-serif;
}
.joinus button{
display: block;
margin: 0 auto;
width: 260px;
height: 36px;
border-radius: 50px;
color: #fff;
font-size: 15px;
cursor: pointer;
}
.submit{
margin-top: 40px;
margin-bottom: 30px;
text-transform: uppercase;
font-weight: 600;
font-family: 'Nunito', sans-serif;
background-color: rgb(224, 173, 19);
}
.submit:hover{
background-color: rgba(0,136,168,0.8);
}
.forgot-pass{
margin-top: 15px;
text-align: center;
font-size: 14px;
font-weight: 600px;
color: #0c0101;
cursor: pointer;
}
.forgot-pass:hover{
color: rgba(0,136,168,0.8);
}
.social-media{
width: 100%;
text-align: center;
margin-top: 20px;
}
.social-media ul{
list-style: none;
}
.social-media ul li{
display: inline-block;
cursor: pointer;
margin: 25px 15px;
}
.social-media img{
width: 40px;
height: 40px;
}
.sub-cont{
overflow: hidden;
position: absolute;
left: 640px;
top: 0;
width: 900px;
height: 100%;
padding-left: 260px;
background: #fff;
-webkit-transition: -webkit-transform 1.2s ease-in-out;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out;
}
.cont.s-signup .sub-cont{
-webkit-transform: translate3d(-640px, 0, 0);
transform: translate3d(-640px, 0, 0);
}
.img{
overflow: hidden;
z-index: 2;
position: absolute;
left: 0;
top: 0;
width: 260px;
height: 100%;
padding-top: 360px;
}
.img:before{
content: '';
position: absolute;
right: 0;
top: 0;
width: 900px;
height: 100%;
background-image: url(img/alex.jpg);
background-size: cover;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}
.img:after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,1);
}
.cont .s-signup .img:before{
-webkit-transform: translate3d(640px, 0, 0);
transform: translate3d(640px, 0, 0);
}
.img-text{
z-index: 2;
position: absolute;
left: 0;
top: 50px;
width: 100%;
padding: 0 20px;
text-align: center;
color: #fff;
-webkit-transition: -webkit-transform 1.2s ease-in-out;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}
.img-text h2{
margin-bottom: 10px;
font-weight: normal;
}
.img-text p{
font-size: 14px;
line-height: 1.5;
}
.cont.s-signup .img-text.m-up{
-webkit-transform: translateX(520px);
transform: translateX(520px);
}
.img-text.m-in{
-webkit-transform: translateX(-520px);
transform: translateX(-520px);
}
.cont.s-signup .img-text.m-in{
-webkit-transform:translateX(0);
transform:translateX(0);
}
.sign-in{
padding-top: 65px;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.cont.s-signup .sign-in{
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: 1.2s;
transition-duration: 1.2s;
-webkit-transform: translate3d(640px, 0 , 0);
transform: translate3d(640px, 0 , 0);
}
.img-btn{
overflow: hidden;
z-index: 2;
position: relative;
width: 100px;
height: 36px;
margin: 0 auto;
background: transparent;
color: #fff;
text-transform: uppercase;
font-size: 15px;
cursor: pointer;
}
.img-btn:after{
content: '';
z-index: 2;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 2px solid #fff;
border-radius: 50px;
}
.img-btn span{
position: absolute;
left: 0;
top: 0;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 1.2s;
transition: -webkit-transform 1.2s;
transition: transform 1.2s;
transition: transform 1.2s, -webkit-transform 1.2s;
}
.img-btn span.m-in{
-webkit-transform: translateY(-72px);
transform: translateY(-72px);
}
.sign-up{
-webkit-transform: translate3d(-900px, 0 ,0);
transform: translate3d(-900px, 0, 0);
}
.cont.s-signup .sign-up{
-webkit-transform: translate3d(0, 0 ,0);
transform: translate3d(0, 0, 0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Join us</title>
<link rel="stylesheet" type="text/css" href="style/joinus.css">
</head>
<body>
<section class="heading">
<header>
<img class="logo" src="img/logo_csc.png" alt="logo">
<nav>
<ul class="navigation">
<li>Home</li>
<li>About us</li>
<li>Research</li>
<li>Our Achievement</li>
</ul>
</nav>
<div>
<button>Join us</button>
</div>
</header>
</section>
<section class="joinus">
<div class="cont">
<div class="form sign-in">
<h2>Sign In</h2>
<label>
<span>Email Address</span>
<input type="email" name="email">
</label>
<label>
<span>Password</span>
<input type="password" name="password">
</label>
<button class="submit" type="button">Sign In</button>
<p class="forgot-pass">Forgot Password?</p>
<div class="social-media">
<ul>
<li><img src="img/instagram.png"></li>
<li><img src="img/youtube.png"></li>
</ul>
</div>
</div>
<div class="sub-cont">
<div class="img">
<div class="img-text m-up">
<h2>New activist?</h2>
<p>Sign up here!</p>
</div>
<div class="img-text m-in">
<h2>Already an activist?</h2>
<p>If you already has an account, sign in here!.</p>
</div>
<div class="img-btn">
<span class="m-up">Sign Up</span>
<span class="m-in">Sign In</span>
</div>
</div>
<div class="form sign-up">
<h2>Sign Up</h2>
<label>
<input type="text" placeholder="Full Name...">
</label>
<label>
<input type="email" placeholder="Email...">
</label>
<label>
<input type="text" placeholder="Majors...">
</label>
<label>
<input type="password" placeholder="Password...">
</label>
<label>
<input type="password" placeholder="Confirm Password...">
</label>
<button type="button" class="submit">Sign Up Now</button>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="script/register.js"></script>
</body>
</html>

Working Codepen https://codepen.io/thisisloop/pen/xxwadPp
I had to add these two codes to the CSS File:
.cont.s-signup .img-btn span.m-in{
-webkit-transform: translateY(0);
transform: translateY(0);
}
.cont.s-signup .img-btn span.m-up{
-webkit-transform: translateY(72px);
transform: translateY(72px);
}
For the image, you need to add quotation marks
instead of:
background-image: url(img/alex.jpg);
do
background-image: url('img/alex.jpg');
I couldnt add it to the codepen, because codepen doesnt allow file upload for free users.

Writing over img on hover

I would like to put a decription text over image while hover. What is the best way to do it? Do I need any js or there is a css solution?
Instead of the divs in snippet I have images in the shape of circle. Hovering the img makes it little bigger as in example.
Thanks for help.
.circle{
width: 150px;
height: 150px;
background: yellow;
border-radius: 100%;
text-align:center;
display: inline-block;
transition: all .2s ease-in-out;
}
.circle:hover{
transform: scale(1.1);
}
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>

.circle{
width: 150px;
height: 150px;
background: yellow;
border-radius: 100%;
text-align:center;
position: relative;
display: inline-block;
transition: all .2s ease-in-out;
}
.hoverContent {
opacity: 0;
top: 50%;
left: 50%;
position: absolute;
transform: translateY(-50%) translateX(-50%);
transition: all .2s ease-in-out;
}
.circle:hover{
transform: scale(1.1);
}
.circle:hover .hoverContent {
opacity: 1;
}
<div class="circle">
<span class="hoverContent">Hey there 1</span>
</div>
<div class="circle">
<span class="hoverContent">Hey there 2</span>
</div>
<div class="circle">
<span class="hoverContent">Hey there 3</span>
</div>

Using only CSS and HTML attributes.
.circle {
width: 150px;
height: 150px;
text-align: center;
background: yellow;
border-radius: 100%;
position: relative;
display: inline-block;
transition: all .2s ease-in-out;
}
.circle:hover{
transform: scale(1.1);
}
/* NEW CODE */
.circle:after {
content: attr(data-desc);
display: none;
position: absolute;
top: 50%;
background-color: white;
left: 50%;
transform: translate(-50%, -50%);
}
.circle:hover:after {
display: inline-block;
}
<div class="circle" data-desc="Hello"></div>
<div class="circle" data-desc="World"></div>
<div class="circle" data-desc="just wrap the img and it works">
<img width="100%" height="100%" src="http://www.matmasar.wz.cz/kone.png">
</div>

CSS3 Card Flip and Expand

I'm trying to have a collection of cards/divs within a container. When a card/div is clicked, it should flip horizontally and expand to take up the entire space within the container (basically changing the size of the card/div to 100% x 100% when clicked). I'm unsure if this is possible or not, as all of the examples that I've seen out there typically involve the card/div remaining the same size.
Here's the fiddle I tried working with, but I can't get the basic flipping functionality: https://jsfiddle.net/4dazznb5/
$('.card').click(function(){
$(this).addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
.cards {
width: 100%;
height: 100%;
background: gray;
padding: 10px;
box-sizing: border-box;
position: relative;
-webkit-perspective: 800;
perspective: 800;
}
.cards .card {
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
z-index: 2;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
}
.flip .card .back {
-webkit-transform: rotatex(-180deg);
background: white;
}
.cards .card.flipped {
-webkit-transform: rotatex(-180deg);
}
.card {
width: 100%;
background: lightgray;
padding: 6px;
margin: 10px 0;
box-sizing: border-box;
cursor: pointer;
position: relative;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.card:nth-of-type(1) {
margin-top: 0;
}
.card figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
backface-visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 400px; height: 600px;">
<div class="cards">
<div class="card">
<div class="face front">Card 1 Front</div>
<div class="face back">Card 2 Back</div>
</div>
<div class="card">
<div class="face front">Card 2 Front</div>
<div class="face back">Card 2 Back</div>
</div>
<div class="card">
<div class="face front">Card 3 Front</div>
<div class="face back">Card 3 Back</div>
</div>
</div>
</div>

Since Tambo's backfaces were better (allowing html content), I made this mix with our answers (tested with success on Mozilla and Chrome):
$('.card').click(function(){
if (!$(this).hasClass("flipped")) {
$( ".face" ).addClass( 'off' );
$( this ).children( ".face" ).removeClass( 'off' );
$( this ).parent( ".cards" ).addClass( 'big' );
$( this ).addClass('flipped');
} else {
$( ".face" ).removeClass( 'off' );
$( ".cards" ).removeClass( 'big' );
$( this ).removeClass('flipped');
}
});
body {
height:100vh;
width:100vw;
margin:0px;
}
#container {
position: relative;
background: skyblue;
height:100%;
width:60%;
overflow: hidden;
margin:auto;
}
.off {
color: rgba(0, 0, 0, 0.0) !important;
background: rgba(230, 230, 250, 0.0) !important;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
}
.cards {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px;
width: 80%;
height: 20%;
position: absolute;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
margin-left: 10%;
margin-right: 10%;
}
.cards .card.flipped {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
height: 100%;
z-index: 100;
}
.cards .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
}
.cards .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
-moz-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
font-size: 2em;
font-family: arial, sans-serif;
text-align: center;
-webkit-transition: all 0.5s; /* Safari */
transition: all 0.5s;
}
.cards .card .front {
position: absolute;
background: tomato;
z-index: 1;
}
.cards .card .back {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
background: gold;
}
.cards .card .front,
.cards .card .back{
cursor: pointer;
}
.big {
height:100%;
width:100%;
top: 0% !important;
margin-left: 0%;
margin-right: 0%;
z-index:100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container>
<div class=cards style="top:0px">
<div class=card>
<div class="face front">
Card 1 Front
</div>
<div class="face back">
Card 1 Back
</div>
</div>
</div>
<div class=cards style="top:25%">
<div class=card>
<div class="face front">
Card 2 Front
</div>
<div class="face back">
Card 2 Back
</div>
</div>
</div>
<div class=cards style="top:50%">
<div class=card>
<div class="face front">
Card 3 Front
</div>
<div class="face back">
Card 3 Back
</div>
</div>
</div>
<div class=cards style="top:75%">
<div class=card>
<div class="face front">
Card 4 Front
</div>
<div class="face back">
Card 4 Back
</div>
</div>
</div>
</div>

Just add !important to the new 'flipped' class attributes overwrites the old ones. The javascript line $( ".item" ).not( this ).addClass( 'off' ) removes the other cards when one is selected. The absolute position let everything on its place. The active card have a higher z-index to ensures that other cards will not activate the 'mouseleave' trigger. UPDATE: finally working 100% on Mozilla and Chrome. ps: a click opens the card and another click closes it.
$('.item').click(function(){
if (!$(this).hasClass("flipped")) {
$( ".item" ).not( this ).addClass( 'off' );
$( this ).addClass('flipped');
} else {
$( ".item" ).removeClass( 'off' );
$( this ).removeClass('flipped');
}
});
.off {
color: rgba(0, 0, 0, 0.0) !important;
background: rgba(230, 230, 250, 0.0) !important;
}
.cards {
width: 100%;
height: 100%;
background: lavender;
position: relative;
-webkit-perspective: 900px;
perspective: 900px;
}
.flipped {
top: 0% !important;
height: 100% !important;
width: 100% !important;
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
color: rgba(0, 0, 0, 0.0);
z-index:100;
-webkit-transform-style: preserve-3d;
background: tomato;
}
.flipped:after {
content: 'More text on here.';
right: 0px;
bottom: 0px;
position: absolute;
top: 0px;
left: 0px;
color: rgba(0, 0, 0, 1.0);
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
background: gold;
}
.card {
height: 22%;
width: 100%;
box-sizing: border-box;
cursor: pointer;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
display: block;
position: absolute;
background: tomato;
}
.aaa {
top:0%;
}
.bbb {
top:26%;
}
.ccc {
top:52%;
}
.ddd {
top:78%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 400px; height: 600px;">
<div class="cards">
<div class="card item aaa">
<div class="face front">Some text on here.</div>
</div>
<div class="card item bbb">
<div class="face front">Some text on here.</div>
</div>
<div class="card item ccc">
<div class="face front">Some text on here.</div>
</div>
<div class="card item ddd">
<div class="face front">Some text on here.</div>
</div>
</div>
</div>

Just play with Element.classList and CSS transitions
// Function to flip the card and expand the content
function flipMe() {
console.log(this.innerHTML);
var card = this.querySelector('.card');
card.classList.add('flipped');
// this handler will be executed every time the cursor is moved off the card
card.addEventListener("mouseout", function( event ) {
this.classList.remove('flipped');
}, false);
}
// Define our variables
var cardWrapper = document.querySelector('.cardWrapper');
cardWrapper.addEventListener("click", flipMe, false);
:root {
background: #CAC8CC;
}
.cardWrapper {
-webkit-perspective: 800;
-moz-perspective: 800;
perspective: 800;
width: 400px;
height: 300px;
position: relative;
margin: 100px auto;
}
.cardWrapper .card.flipped {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
height: 100%;
}
.cardWrapper .card {
width: 100%;
height: 100px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: .5s;
-moz-transition: .5s;
transition: .5s;
}
.cardWrapper .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
-moz-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
font-size: 4em;
text-align: center;
}
.cardWrapper .card .front {
position: absolute;
background: black;
color: white;
z-index: 1;
}
.cardWrapper .card .back {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
background-color: #0095ff;
}
.cardWrapper .card .front,
.cardWrapper .card .back{
cursor: pointer;
}
<div class=cardWrapper>
<div class=card>
<div class="face front">
Card 1 Front
</div>
<div class="face back">
Card 1 Back
</div>
</div>
</div>