change flipcard style to feature images and change flip event to click

scripts/flipcard/flipcard.css

@@ -8,7 +8,7 @@
 
 /* THE MAINCONTAINER HOLDS EVERYTHING */
 
-.fc-maincontainer {
+.flipcard {
   position: absolute;
   width: 350px;
   height: 460px;
@@ -19,7 +19,7 @@
 }
 
 /* THE CARD HOLDS THE FRONT AND BACK FACES */
-.fc-thecard{
+.flipcard .fccard{
   position: relative;
   top: 0;
   left: 0;
@@ -30,7 +30,7 @@
   transition: all 0.8s ease;
 }
 
-.fc-header p {
+.flipcard .fchead p {
     font-size: 2.0em !important;
     margin: 0 0 20px 0;
     color: #fff;
@@ -43,24 +43,13 @@
     word-wrap: break-word;
 }
 
-.fc-flip {
-  background-color: #4d7d43;
-  color: #7bdb96;
-  font-style: italic;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  padding: 0.25em 0;
-}
-
 /* THE PSUEDO CLASS CONTROLS THE FLIP ON MOUSEOVER AND MOUSEOUT */
 /* .fc-thecard:hover{ */
 /*   /\* transform: rotateY(180deg); *\/ */
 /* } */
 
 /* THE FRONT FACE OF THE CARD, WHICH SHOWS BY DEFAULT */
- .fc-thefront{
+ .flipcard .fcfront{
   position: absolute;
   top: 0;
   left: 0;
@@ -71,12 +60,12 @@
   overflow: hidden;
   /* background: #ffc728; */
   background: #7bdb96;
-  color: #000;
+  color: #333;
   padding: 30px;
 }
 
 /* THE BACK FACE OF THE CARD, WHICH SHOWS ON MOUSEOVER */
-.fc-theback{
+.flipcard .fcback{
   position: absolute;
   top: 0;
   left: 0;
@@ -91,3 +80,44 @@
   transform: rotateY(180deg);
   padding: 30px;
 }
+
+.flipcard .fccard figure {
+  margin: 0;
+  height: 50%;
+}
+
+.flipcard .fccard figure img {
+  margin: 0;
+  height: 100%;
+  max-width: unset;
+  max-height: unset;
+}
+
+/* section of the card to flip the card */
+.flipcard .fcflip {
+  font-style: italic;
+  position: absolute;
+  /* bottom: 0; */
+  /* left: 0; */
+  /* width: 100%; */
+  /* padding: 0.25em 0; */
+  bottom: -0.4em;
+  width: 100%;
+  padding: 0.5em 0;
+  right: -1.8em;
+  width: 5em;
+}
+
+.flipcard .fcfront .fcflip {
+  background-color: #4d7d43;
+  color: #7bdb96;
+  transform: rotate(-45deg);
+  background: linear-gradient(to bottom, transparent, #4d7d43);
+}
+
+.flipcard .fcback .fcflip {
+  background-color: #806344;
+  color: #dba57b;
+  transform: rotate(-45deg);
+  background: linear-gradient(to bottom, transparent, #806344);
+}

scripts/flipcard/flipcard.js

@@ -1,12 +1,12 @@
 function flipcard_main() {
-  var cardFront = document.getElementsByClassName("fc-thefront");
+  var cardFront = document.getElementsByClassName("fcfront");
   var i;
   var flip;
   for (i = 0; i < cardFront.length; i++) {
     flip = document.createElement("div");
     flip.appendChild(document.createTextNode("flip"));
-    flip.className = "fc-flip";
-    flip.addEventListener("mouseover", event => {
+    flip.className = "fcflip";
+    flip.addEventListener("click", event => {
       var flip = event.target;
       var front = flip.parentElement;
       var card = front.parentElement;
@@ -14,18 +14,19 @@ function flipcard_main() {
     });
     cardFront[i].appendChild(flip);
   };
-
-  var cardBack = document.getElementsByClassName("fc-theback");
+  var cardBack = document.getElementsByClassName("fcback");
   var i;
   for (i = 0; i < cardBack.length; i++) {
-    cardBack[i].addEventListener("mouseleave", flipcard_mouseLeave, true);
-  }
-};
-function flipcard_mouseLeave(event) {
-  if (event.target.className == "fc-theback") {
-    var back = event.target;
-    var card = back.parentElement;
-    card.style.transform = "rotateY(0deg)";
-  }
+    flip = document.createElement("div");
+    flip.appendChild(document.createTextNode("flip"));
+    flip.className = "fcflip";
+    flip.addEventListener("click", event => {
+      var flip = event.target;
+      var front = flip.parentElement;
+      var card = front.parentElement;
+      card.style.transform = "rotateY(0deg)";
+    });
+    cardBack[i].appendChild(flip);
+  };
 };
 flipcard_main();