We Keep Coding

How to turn off hover effect after certain amount of time?

I have a hover effect where when the icon image is hovered over, an larger image appears (for clarity). I want this larger image effect to end after three seconds AND still have the hover ability. If the image is moved off of, then came back to; I want the larger image to load for another three seconds. Every time the image is hovered over, the effect would last three seconds.
I have tried CSS animations, transitions, setTimeout and none of them are working like I need. Any help is appreciated. I have a LOT of code on this project, so I will try to only include the relevant parts. Thanks in advance.
I will have the code added to the question, once i figure out what I am doing wrong.
Code for building levels for hover image
#PlayerMarker1 {
position: absolute;
left:2%;
top: 2%;
z-index: 9;
}
#Player1Final{
position: absolute;
left:2%;
top: 2%;
z-index: 9;
}
/* Elements for Image load on hover*/
.playerMarker img{
margin: 0 5px 5px 0;
}
.playerMarker:hover{
background-color: transparent;
}
.playerMarker:hover img{
border: 1px;
}
.playerMarker span{ /*CSS for enlarged image*/
position: absolute;
padding: 0px;
left: -1000px;
/*background-color: black ;*/
visibility: hidden;
color: black;
text-decoration: none;
}
.playerMarker span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.playerMarker:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 100px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
Code for defining the images.
<div id="Player1Test">
<a id="PlayerMarker1" href="#thumb1"><img src="Player Markers/Morty_Icon.png" width="auto" height="auto"/><span><img src="Player Images/Morty_Token.png" /><br /></span></a>
</div>
This script adds the playerMarker classes to the element I need.
/* Script to add class to player marker ID items */
function Player1Function() {
var Player1FinalTest = document.getElementById("PlayerMarker1");
Player1FinalTest.classList.add("playerMarker");
Player1FinalTest.id='Player1Final';
}

Seems like css animations to pulse the image would work fine. Run the code snippet to try.
img {
margin: 25px;
width: 100px;
height: auto;
}
img:hover {
animation: pulse 2s 1;
}
#keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
50% {
transform: scale(1.4);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
<h4>Hover the mouse over image<h4>
<img src="https://stackoverflow.design/assets/img/favicons/apple-touch-icon.png">

Yogi has a good answer using an animation that could be adapted to clearly move your element. I wanted to add an answer manipulating the left and top values using delay.
You are essentially moving a hidden image from off screen onto the screen. Though this feels a bit strange to do, as there may be more clear ways of accomplishing this task, you can immediately move the left into view, and delay moving the top out of view.
A different delay is needed for the hover and for the base element, so it returns to the original position immediately and is available for reuse, but delays moving away on hover.
This might keep in spirit of your current project.
If you have any questions, please ask 🚀
.playerMarker {
background-color: lightblue;
--size: 4rem;
height: var(--size);
width: var(--size);
}
.playerMarker span {
position: absolute;
padding: 0px;
top: 0;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
transition: top 0s;
}
.playerMarker span img {
border-width: 0;
padding: 2px;
}
.playerMarker:hover span {
transition: top 0s 2s;
visibility: visible;
top: -1000px;
left: 100px;
z-index: 50;
}
<div class="playerMarker">
<span>
<img src="https://stackoverflow.design/assets/img/favicons/apple-touch-icon.png" />
</span>
</div>

How to make a 3D slick slider

Using slick, I'm trying to achieve a slider that looks like this:
In the above, the center slide is the default selected when slick initiates. Then, when an arrow is clicked, the slick-current class will shift onto a new div and css translate can be used to scale the image.
Here is my current code:
$(function(){
$("#downloadNow__slick").slick({
slidesToShow: 3,
// initialSlide: 2,
centerMode: true,
centerPadding: "53px",
arrows: true,
dots: false,
infinite: true,
cssEase: 'linear',
});
});
.downloadNow {
background: grey;
padding: 60px 0px;
&__wrapper {
position: relative;
}
.downloadNowCard{
background: white;
padding: 100px;
}
.slider {
max-width: 1110px;
margin: 0 auto;
}
.slick-track {
padding-top: 53px;
padding-bottom: 53px;
}
.slick-slide {
text-align: center;
transition: transform 0.3s ease-in-out;
}
.slick-slide.slick-current {
transform: scale(1.35);
position: relative;
z-index: 1;
}
.slick-slide img {
width: 100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
<section class="downloadNow">
<div class="downloadNow__wrapper">
<div class="downloadNow__slides" id="downloadNow__slick">
<div class="downloadNowCard">Card 1</div>
<div class="downloadNowCard">Card 2</div>
<div class="downloadNowCard">Card 3</div>
</div>
</div>
</section>
Current issues:
Cannot achieve row layout (flex on wrapper not playing nicely)
If I uncomment out initialSlide: 2, the slider breaks. I'm trying to get the center slide as the active slide with this.
Slick not changing slide

Here you go...
It took me some time to figure it out because of some strange behavior of the slick slider.
To begin with, the slick slider didn't work with newer versions of jQuery. After a lot of trial and error (and searching through older answers here on SO), I figured out it works only with the older version of jQuery for some strange reason. This is the main reason it didn't work for you too. I used older version of jQuery than you did and it still didn't work. It works with v1.12.3 (it might also work with some newer versions of jQuery, but I didn't test which is the latest compatible version).
To achieve a 3D effect, you can use box-shadow: 0.1vw 0.8vw 1vw rgba(0, 0, 0, 0.35);. With the current values (i.e. 0.1vw 0.8vw 1vw), you get a blurry shadow at the bottom and a little bit on the right side. The first value (i.e. 0.1vw) defines a horizontal offset. The second value (i.e. 0.8vw) defines a vertical offset. The third value (i.e. 1vw) defines blur radius so that the shadow is "smooth" (try to remove 1vw and you'll get the point).
Also, I managed to solve all your issues:
the row layout works,
the middle card is always an "active card" (a little bit bigger box, a little bit bigger font) and
arrows work too (but you have to use z-index: 100; to push them to the front).
$(document).on('ready', function() {
$('.slider').slick({
dots: true,
centerMode: true,
infinite: true,
centerPadding: '60px',
slidesToShow: 3,
speed: 400
});
});
html {
height: 100%;
overflow-x: hidden;
}
body {
background: #F8F8F8;
height: 100%;
margin: 0;
}
.slider {
width: 90%;
left: 5%;
}
h3 {
background: #fff;
color: #202020;
font-size: 3.5vw;
line-height: 23vh;
margin: 6.5vw;
margin: 6.5vw;
padding: 1vw;
position: relative;
text-align: center;
box-shadow: 0.1vw 0.8vw 1vw rgba(0, 0, 0, 0.35);
}
.slick-center {
transition: 0.2s ease-in-out;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
transform: scale(1.3);
}
.slick-center h3 {
font-size: 4vw;
}
.slick-prev,
.slick-next {
z-index: 100 !important;
}
.slick-prev:before {
transition: 0.2s ease-in-out;
color: #303030 !important;
font-size: 2vw !important;
margin-right: -10vw;
}
.slick-next:before {
transition: 0.2s ease-in-out;
color: #303030 !important;
font-size: 2vw !important;
margin-left: -10vw;
}
.slick-dots li button:before {
transition: 0.2s ease-in-out;
font-size: 0.7vw !important;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js'></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css' rel='stylesheet' />
</head>
<body>
<div class='slider'>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</div>
</body>
</html>

For a smooth 3D Effect you need to play with shadows, by increasing/decreasing the shadow you get a visual illusion of a popping out/in box, for the animation effects play with css transition use only transform for better performance.
You don't need external libraries to achieve this, the example below is a pure HTML/CSS/Javascript slider.
Edit: add some explanatory comments to the example.
// Button click events
const buttons = document.querySelectorAll('b')
buttons.forEach((button, i) =>
button.onclick = () => slide(i)
)
// Slide function
function slide(right) {
// Get the SLider elements
const container = document.querySelector('div');
const slider = document.querySelector('ul');
const items = document.querySelectorAll('li');
const featured = document.querySelector('.featured');
// Get the featured item
const featuredIndex = [...items].indexOf(featured);
// Set the move if not right then left
const move = right ? 1 : -1;
// Check the slider limits
// if right and index 0: do nothing
// if left and last item: do nothing
if((!right && !featuredIndex)
|| (right && featuredIndex === items.length -1))
return;
// Get the next item element
const nextIndex = featuredIndex + move;
const nextItem = items[nextIndex]
// Remove "featured" class from last item
featured.classList.remove("featured");
// Add "featured" class the next item
nextItem.classList.add("featured");
// Get the container size
const { width: containerSize } = container.getBoundingClientRect();
// Get the next item size and position
const itemSize = containerSize / 3; // Display only 3 items
const itemPosition = itemSize * (nextIndex + 1); // Current position
// Compute the slider next position
const position = containerSize - itemPosition - itemSize;
// Move the slider on its X axis using css transform and transitionX
slider.style.transform = `translateX(${position}px)`
}
body{
background: #ddd;
}
/* Some csss reboot */
ul, li{
margin: 0;
padding: 0;
list-style-type: none;
}
/* Container */
div {
position: relative;
width: 100%;
overflow-x: hidden;
transform: transitionX(0);
}
/* Preview/Next Buttons */
b {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0.5em;
width: 20px;
height: 20x;
line-height: 20px;
font-size: 1.2em;
color: #666;
cursor: pointer;
transform: translateY(-50%) scale(1);
transition: transform .1s ease-out;
}
b:last-child {
left: unset;
right: 0.5em;
}
/* Button animation on hover */
b:hover{
transform: translateY(-50%) scale(1.3);
}
/* Slider */
ul {
position: relative;
padding: 2em 0;
display: flex;
width: 100%;
height: 150px;
transform: translateX(0);
transition: transform .3s ease-out;
}
/* Items */
li {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 4em;
font-weight: 500;
font-family: arial;
color: #555;
min-width: calc(100% / 3);
background: #fff;
border-radius: .5em;
/* Animation */
transform: translateX(10%) scale(0.5);
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
transition: all .3s ease-out;
}
/* Featured Item */
.featured {
z-index: 1;
/* Animation */
transform: scale(1);
box-shadow: 0 16px 24px 2px rgb(0 0 0 / 14%), 0 6px 30px 5px rgb(0 0 0 / 12%), 0 8px 10px -7px rgb(0 0 0 / 20%)
}
.featured + li {
/* Offset the next element under the selected element */
transform: scale(.5) translateX(-25%) !important;
}
<div> <!-- Container -->
<ul> <!-- Slider -->
<li>1</li> <!-- Ithems -->
<li class="featured">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<b>ᐸ</b> <!-- Preview button -->
<b>ᐳ</b> <!-- Next button -->
</div>

How do I stick a div element to the div above it on scroll?

I have a top header that is fixed and shrinks on scroll. Below that I have a div element (side banner) that has to be centered vertically in the view-pane and has to stick to the top header when I scroll down. I can't get this div element to stick to the top header.
I have tried using the CSS position: sticky but it doesn't work. The issue is the side banner runs over the top header on scroll. I have also tried adding a sticky class that shows up with some javascript but I must be doing something wrong because it doesn't work. PLEASE HELP!
HTML:
<header id="topBanner">Top Banner</header>
<div class="content">
<div class="sideBanner" id="sideBanner">
</div>
</div>
CSS:
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #fcf2dc;
}
#topBanner {
background-color: #e9ab18;
padding: 50px 10px;
color: #000;
text-align: center;
font-size: 90px;
font-weight: bold;
position: fixed;
top: 0;
width: 100%;
transition: 0.2s;
}
.content {
position: relative;
height: 1000px;
}
.sideBanner {
position: absolute;
background: #f5d997;
width: 150px;
height: 400px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: 10px;
}
.sticky {
position: fixed;
top: 0;
}
JAVASCRIPT:
// FUNCTION TO MAKE TOP HEADER SHRINK ON SCROLL:
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 50 ||
document.documentElement.scrollTop > 50) {
document.getElementById("topBanner").style.fontSize = "30px";
} else {
document.getElementById("topBanner").style.fontSize = "90px";
}
}

There is no class sticky in your HTML.
You have created the class in your CSS but you're not applying this class on the HTML.

Your sticky idea works fine. The tricky part is knowing what top value to give it.
Trial and error in Chrome led me to set it to 334px, but you'd be better off calculating this value dynamically. You could possibly start from topBanner.offsetHeight and add in other values (such as padding or margins that may not have been included in the calculated value.)
I also gave topBanner z-index: 1 in the following snippet (which is almost identical to what you originally posted), to prevent sideBanner from briefly appearing in front of it during rapid scrolling.
(Note: This snippet's behavior is clearer in SO's full-screen view.)
const topBanner = document.getElementById("topBanner");
const sideBanner = document.getElementById("sideBanner");
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop > 50) {
topBanner.style.fontSize = "30px";
sideBanner.classList.add("sticky");
} else {
topBanner.style.fontSize = "90px";
sideBanner.classList.remove("sticky");
}
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #fcf2dc;
}
#topBanner {
background-color: #e9ab18;
padding: 50px 10px;
color: #000;
text-align: center;
font-size: 90px;
font-weight: bold;
position: fixed;
top: 0;
width: 100%;
transition: 0.2s;
z-index: 1; /* Positions this element in front of others */
}
.content {
position: relative;
height: 1000px;
}
.sideBanner {
position: absolute;
background: f5d997;
width: 150px;
height: 400px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: 10px;
}
.sticky {
position: fixed;
top: 334px; /* Hard-coded guess for this value, dynamic would be better */
}
<header id="topBanner">Top Banner</header>
<div class="content">
<div class="sideBanner" id="sideBanner">
s <br />
i <br />
d <br />
e <br />
<br />
b <br />
a <br />
n <br />
n <br />
e <br />
r <br />
</div>
</div>

Material Design Ripple Animation into Transition HTML Web

Hello StackOverFlowers!
I found this really awesome animation on jsfiddle.net and would really love to use it in my project.
I'f you follow the link the author, 'internoma', states that it can be used as a page transition if a little Ajax is added.
My question is: What Ajax code do I add in order to make this work?!
I'm extremely lost, any suggestions will be greatly appreciated.
If you happen to know how to make this working using Barba.js or smoothState.js that would be awesome also since those are to plugins I'd like to dive deeper in learning.
Thanks in advance!
Link: Material Design Ripple Transition
JavaScript:
$(document).ready(function() {var ripple_wrap = $('.ripple-wrap'),
rippler = $('.ripple'),
finish = false,
monitor = function(el) {
var computed = window.getComputedStyle(el, null),
borderwidth = parseFloat(computed.getPropertyValue('border-left-width'));
if (!finish && borderwidth >= 1500) {
el.style.WebkitAnimationPlayState = "paused";
el.style.animationPlayState = "paused";
swapContent();
}
if (finish) {
el.style.WebkitAnimationPlayState = "running";
el.style.animationPlayState = "running";
return;
} else {
window.requestAnimationFrame(function() {monitor(el)});
}
};
storedcontent = $('#content-2').html();
$('#content-2').remove();
rippler.bind("webkitAnimationEnd oAnimationEnd msAnimationEnd
mozAnimationEnd animationend", function(e){
ripple_wrap.removeClass('goripple');
});
$('body').on('click', 'a', function(e) {
rippler.css('left', e.clientX + 'px');
rippler.css('top', e.clientY + 'px');
e.preventDefault();
finish = false;
ripple_wrap.addClass('goripple');
window.requestAnimationFrame(function() {monitor(rippler[0])});
});
function swapContent() {
var newcontent = $('#content-area').html();
$('#content-area').html(storedcontent);
storedcontent = newcontent;
// do some Ajax, put it in the DOM and then set this to true
setTimeout(function() {
finish = true;
},10);
}
});
CSS
.ripple-wrap {
display: none;
overflow: hidden;
position: fixed;
font-size: 0;
z-index: 1000;
top: 0; left: 0; right: 0; bottom: 0;
}
#-webkit-keyframes RIPPLER {
0% { border-width: 0; }
40% {
height: 0;
width: 0;
border-width: 1500px;
margin-top: -1500px;
margin-left:-1500px;
border-color: #009688;
}
41% {
height: 0;
width: 0;
border-width: 1500px;
margin-top: -1500px;
margin-left:-1500px;
border-color: #009688;
}
100% {
border-width: 1500px;
height: 2000px;
width: 2000px;
margin-top: -2500px;
margin-left:-2500px;
border-color: #009688;
}
}
#keyframes RIPPLER {
0% { border-width: 0; }
40% {
height: 0;
width: 0;
order-width: 1500px;
margin-top: -1500px;
margin-left:-1500px;
border-color: #009688;
}
41% {
height: 0;
width: 0;
border-width: 1500px;
margin-top: -1500px;
margin-left:-1500px;
border-color: #009688;
}
100% {
border-width: 1500px;
height: 2000px;
width: 2000px;
margin-top: -2500px;
margin-left:-2500px;
border-color: #009688;
}
}
.ripple {
display: block;
height: 0;
width: 0;
border-width: 0px;
border-style: solid;
border-color: #00796b;
border-radius: 100%;
position: absolute;
top: 300px;
left: 300px;
-webkit-animation: none;
animation: none;
}
.ripple-wrap.goripple {
display: block;
}
.ripple-wrap.goripple .ripple {
-webkit-animation-name: RIPPLER;
-webkit-animation-duration: 1.5s;
-webkit-animation-fill-mode: forwards;
animation-name: RIPPLER;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
HTML
<div class="wrap" id="content-area">
<h1>Material Design Ripple Transition</h1>
<p>Just playing around to see if I can recreate the Material Design
ripple as a page transition in CSS. Click any link in
this block of text to load another set of text. The links don't go anywhere yet. They are just hooks to allow you to click somewhere</p>
<p>The style and animation is entirely CSS so it is smooth. JavaScript
is used to add classes at the right time. It also pauses to wait for the
content to be replaced, and calculates where to centre the hole. There
are two stages to the animation. When a link is clicked
the border-width grows very large.</p>
<p>That's enough reading on this slide. Click a link to
load the second slide</p>
</div>
<div id="content-2" style="display:none">
<h2>Slide Two</h2>
<p>This is the second slide. If you want you can <a href="#">go back to
the first slide</a>. The second part of the animation is increasing the
size of the element itself in order to create a hole.</p>
<p>This transition could be used for presentation slides. Using
pushState then this could be used as a transition between webpages.</p>
</div>
<div class="ripple-wrap"><div class="ripple"></div></div>

Create Flash Cards Dynamically in JQuery?

Is it possible, with the following Fiddle, to allow a user to create flash cards dynamically by inputting data into an <input> field?
Fiddle
If it's possible, it would be very much appreciated if a new fiddle could be provided, as I am new to coding.
Thank You!
$(function(){
var maxCards = $('.card').length;
// turn card
for (var i = 1; i <= maxCards; ++i) {
$('._' + i).click(function(){
$(this).addClass('flipped');
$(this).find('.front').addClass('showingBack');
$(this).find('.front').css("z-index", 0);
$(this).css("z-index", i);
});
}
// reset stack
$('#reset button').click(function(){
$('.card').removeClass('flipped');
$('.card').find('.front').removeClass('showingBack');
$('.card').find('.front').css("z-index", 2);
for (var j = 0; j < maxCards; ++j) {
$('.card:eq(' + j + ')').css("z-index", maxCards - j);
}
});
});
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input placeholder="Question" type="text" name="mytext[]"/><input placeholder="Answer" type="text" name="mytext[]"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
body {
background: #ccc;
font-family: Indie Flower, sans-serif;
}
#reset {
text-align: center;
}
#reset button {
background: rgba(0, 0, 0, 0.4);
border: 0;
color: white;
font-size: 12pt;
margin: auto;
width: 120px;
height: 30px;
}
#reset button:active {
background: rgba(0, 0, 0, 0.8);
}
#stack {
margin: auto;
position: relative;
width: 300px;
}
.card {
border: 1px solid #888;
position: absolute;
width: 300px;
height: 180px;
transform-origin: 0% 0%;
}
.card .front {
background: white;
font-size: 24pt;
position: absolute;
width: 300px;
height: 180px;
z-index: 2;
}
.card .front p {
line-height: 3em;
text-align: center;
}
.card .back {
background: white linear-gradient(transparent, transparent 20%, hotpink 20%, hotpink 21%, transparent 21%, transparent 31%, lightblue 31%, lightblue 32%, transparent 32%, transparent 42%, lightblue 42%, lightblue 43%, transparent 43%, transparent 53%, lightblue 53%, lightblue 54%, transparent 54%, transparent 64%, lightblue 64%, lightblue 65%, transparent 65%, transparent 75%, lightblue 75%, lightblue 76%, transparent 76%, transparent 86%, lightblue 86%, lightblue 87%, transparent 87%, transparent 97%);
font-size: 11pt;
position: absolute;
width: 300px;
height: 180px;
transform: rotateY(180deg);
z-index: 1;
}
.card .back p {
margin: 40px 5px 5px 5px;
}
._1 {
top: 0px;
right: 0px;
z-index: 3;
}
._2 {
top: 3px;
right: 2px;
z-index: 2;
}
._3 {
top: 6px;
right: 4px;
z-index: 1;
}
._4 {
top: 9px;
right: 6px;
z-index: 0;
}
.flipped {
transform: rotateY(180deg) translateX(30px);
animation: flip 1s;
}
.showingBack {
animation: showBack 1s;
}
#keyframes flip {
from {
transform: rotateY(0deg) translateX(0px);
}
to {
transform: rotateY(180deg) translateX(30px);
}
}
#keyframes showBack {
0% {
z-index: 2;
}
25% {
z-index: 2;
}
50% {
z-index: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>
Import FlashCard Text Below:
</h2>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Flash Cards</button>
<button>
Create Flash Cards
</button>
<div><input placeholder="Question" type="text" name="mytext[]"><input placeholder="Answer" type="text" name="mytext[]"/></div>
</div>
<hr>
<p id='reset'>
<button align="center">Reset stack</button>
</p>
<div id='stack'>
<div class='card _1'>
<div class='front'>
<p>What is 1+3?</p>
</div>
<div class='back'>
<p>4</p>
</div>
</div>
<div class='card _2'>
<div class='front'>
<p>What is 2-1?</p>
</div>
<div class='back'>
<p>1</p>
</div>
</div>
<div class='card _3'>
<div class='front'>
<p>What is Pi?</p>
</div>
<div class='back'>
<p>3.14...</p>
</div>
</div>
<div class='card _4'>
<div class='front'>
<p>What is 1/2?</p>
</div>
<div class='back'>
<p>0.5</p>
</div>
</div>
</div>

Here's a totally different way to create flash cards.
Flash card content goes into google drive sheets. Easy to use, easy to update. Then use Google's API to download the data in JSON format.
The code is as simple as putting this code in the body of your html file.
<script src="https://spreadsheets.google.com/feeds/list/XXXXXXXX/od6/public/full?alt=json-in-script&callback=useJSONdata"></script>
In the script portion of your site you would have:
function useJSONdata(root) {
console.log(JSON.stringify(root, null, 4));
// Understanding the object root is a great way to understand what is going on with JSON
var entries = root.feed.entry || []; .. etc.
Analyse the data you need, run a for loop, create a string of content to be pasted back into the Document Object Model / HTML / body.
Finally use jQuery mobile tools to create a mobile ready application. I used both their js and css files. Very nice. I made use of three mobile events “swipeleft” “swiperight” and “taphold”. Swipe left to go to next slide. Swipe right to go to previous slide. Long touch and hold to reveal answer to question.
I realize this wasn't exactly what you were asking for, and although an active input is nice, I'm thinking a spreadsheet format for a series of flash cards with data persistence (and the ability to do edits) is a pretty good way to go.