Lock a div in place after you have selected it - css

Question

So I have the hover state figured out. I'd like to keep the card at it's translated stated once I click on it though. I've tried using pseudo class :focus and :active but it didn't work. Or I'm just not putting the right values in.
$('.wrapper').on('click', function() {
$(this).addClass('active');
});
.wrapper:hover {
transform: translateY(5px);
}
.wrapper:active {
transform: translateY(5px);
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="paper">
<img src="https://www.jbhifi.com.au/FileLibrary/ProductResources/Images/216422-M-LO.jpg">
<div class="poster">
<h2>Featured</h2>
<h1>Big Baby Swing</h1>
<p>Does he look like hes stupid. Did he drive well? No. Then is he stupid? He's a good kid that's like the devil behind a wheel. That's all you need to know about him..</p>
More
</div>
</div>
<div class="space"></div>
</div>
codepen to my question

Answer 1

You assign a active class on click so .wrapper.active instead of .wrapper:active should work

Answer 2

You missed jquery cdn and add some css following if you need to get back use toggleClass.
.wrapper.active{
transform: translateY(5px);
}
.wrapper.active div a.button{
width:auto;
font-size: 0.8rem;
background-color: #29426d;
box-shadow: none;
}
$('.wrapper').on('click', function() {
$(this).addClass('active');
// You can use here toggleClass also
});
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #2c3e50;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
}
/* this centers the card in the middle of any browser */
body {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
background-color: #D7D7DD;
}
/* You can rename this .wrapperCard or what ever you may have used. The important thing to notice is the z-index relative to the .papaer div in order for this to work. In the HTML document .space which contains the gradient at the bottom is out side of .paper that holds the information. */
.wrapper {
margin: 0;
padding: 0;
height: auto;
width: auto;
transition: 1s ease;
cursor: pointer;
z-index: 98;
}
.wrapper:hover{
transform: translateY(5px);
}
.wrapper.active{
transform: translateY(5px);
}
.wrapper.active div a.button{
width:auto;
font-size: 0.8rem;
background-color: #29426d;
box-shadow: none;
}
.wrapper:hover div a.button{
width:auto;
font-size: 0.8rem;
background-color: #29426d;
box-shadow: none;
}
/* This calls onto the div.paper on hover and looks for div.space, if you take a way div.space your gradient will not longer dissapear on hover. */
.wrapper:hover div.space{
transform: translateY(-7px);
z-index:-1;
}
/* This is the div that contains all of the informoation, to be noted. The div is set to a specific height of 41, it basically reaches to the bottom of the MORE button. The reason being is so I can hide the gradient which is the div space, placed all the way at the bottom with a z-index of -1. If you take out the height in div.paper you will see why I made the card a particular size, so keep that in mind when you are transfering the gradient code onto the cards for NASCA. */
.paper{
font-family: 'Titilium Web', sans-serif;
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
margin: 0 auto;
padding: 0;
max-width: 300px;
min-width: 300px;
background: white;
text-align: justify;
z-index: 99;
}
a.image{
flex: 1;
text-align: none;
font-size: none;
text-decoration: none;
color:none;
transition: none;
padding:0;
margin: 0;
height: auto;
}
a.image:hover{
color:none;
border-bottom:none;
text-align: none;
box-shadow: none;
transform: none;
}
.poster{
flex: 1;
height: auto;
}
h2{
flex: 1;
font-size: .55rem;
color: #A0A6AB;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
font-family: $sans-serif;
font-weight: 500;
margin-bottom: 10px;
}
h1{
flex: 1;
display: flex;
justify-content: center;
margin-top:1rem;
font-weight:bolder;
letter-spacing: normal;
font-kerning: 1rem;
transition: 0.5s ease;
color: #29426d;
}
h1:hover{
transform: translateX(2px);
}
p{
flex: 1;
padding: 1rem 1rem;
color:#333333;
}
a.button{
position: relative;
display: flex;
justify-content: center;
cursor: pointer;
text-transform: uppercase;
text-decoration: none;
font-size: 0.8rem;
line-height: 20px;
letter-spacing: .06rem;
font-weight: bold;
color: white;
background: #e44d6e;
margin: 0 auto;
padding: 0.5rem 1rem;
width: auto;
transition: 1s ease;
}
/* To be noted, the top selector is set to -4px because the gradient is too strong initially, pulling it up some makes it less harsh. */
.space{
flex: 1;
position: relative;
padding: 0;
margin: 0;
left: 0;
bottom: 0;
width:100%;
height: 1rem;
background: grey;
background: -webkit-linear-gradient(#333333 -290%, transparent 100%);
background: -o-linear-gradient(#333333 -290%, transparent 100%);
background: -mox-linear-gradient(#333333 -290%, transparent 100%);
background: linear-gradient(#333333 -290%, transparent 100%);
transition: 1s ease;
z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="paper">
<img src="https://www.jbhifi.com.au/FileLibrary/ProductResources/Images/216422-M-LO.jpg">
<div class="poster">
<h2>Featured</h2>
<h1>Big Baby Swing</h1>
<p>Does he look like hes stupid. Did he drive well? No. Then is he stupid? He's a good kid that's like the devil behind a wheel. That's all you need to know about him..</p>
More
</div>
</div>
<div class="space"></div>
</div>
</body>