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