cash flash original

by bvotcode

HTML

<!-- 
UNDER CONSTRUCTION 3/13/19 
-->


<!-- BOOTSTRAP 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- ANIMATE CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>


<br>
<br>

<div class="container">
  <div class="row">
    <div class="col">
    <h1 class="display-3">Flash Cards</h1>
    <h4>Hover on cards to learn about computer specs.</h4>
    </div><!-- end col -->
  </div><!-- end row -->
</div><!-- end container -->


<br>
<br>

<div class="container">
  <div class="row">
    
    <!-------- FLASH CARD 1 -------->
    <div class="col-sm">
        <div class="flashcard">
            <div class="p-3 front border">
              <h3>Retina display</h3>
            </div><!-- end front -->
            <div class="p-3 back border">
              <p>Retina display is a term used by Apple to describe displays that have a higher pixel density than traditional displays.</p>
            </div><!-- end back -->
        </div><!-- end flashcard -->
    </div><!-- end col -->
    
    <!-------- FLASH CARD 2 -------->
    <div class="col-sm">
        <div class="flashcard">
            <div class="p-3 front border">
              <h3>GHz</h3>
            </div><!-- end front -->
            <div class="p-3 back border">
              <p>Short for gigahertz, GHz describes the speed the computer's brain works. </p>
            </div><!-- end back -->
        </div><!-- end flashcard -->
    </div><!-- end col -->
    
    <!-------- FLASH CARD 3 -------->
    <div class="col-sm">
        <div class="flashcard">
            <div class="p-3 front border">
              <h3>Processor</h3>
            </div><!-- end front -->
            <div class="p-3 back border">
              <p>This describes the computer's brain. For example: i3, i4,...

CSS

.front {
   width:100%;
  min-height:300px;
  display: table;
  color: red;
}

.back {
   width:100%;
  min-height:300px;
  display: table;
  color: blue;
  background-color: red;
  border-style: solid;
  border-color: coral;
}

.front h3 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: black;
  background-color: powderblue;
  border-style: solid;
  border-color: coral;
}
.back p {
 display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: blue;
  border-style: solid;
  border-color: coral;
}
.fast {
  animation-duration: .5s;
}
.flashcard {
  cursor:pointer;
}

JavaScript

$('.back').hide();

//.delay(3000)

$('.front', '.flashcard').hover(function() {
    $(this).hide();
    $(this).siblings('.back').addClass( "animated flipInY fast" ).show();
});

$('.back', '.flashcard').mouseleave(function() {
  $(this).hide();
  $(this).siblings('.front').addClass( "animated flipInY fast" ).show();
});

/*
$('.front', '.flashcard').on('click', function() {
  $(this).hide();
  $(this).siblings('.back').show();
});



$('.back', '.flashcard').on('click', function() {
  $(this).hide();
  $(this).siblings('.front').show();
});

*/