Fixing flip card effect, closing #186

Using position:absolute was the cause of the blinking for the first render of the back of the card
Using .choices_background:hover{...background-color:white} was the cause of the impression that the flip card was turning only one out of two
Moving down box-shadow to flip-card-inner level

ippisite/ippidb/static/css/main.css

@@ -379,13 +379,15 @@ div.hidden {
 }
 
 .choices_background:hover {
-    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
-    background-color: rgba(255, 255, 255, 1);
     cursor: pointer;
     color: #000;
     text-decoration: none;
 }
 
+.choices_background:hover .flip-card-inner{
+    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
+}
+
 .choices_image {
     text-align: center;
     padding: 11px;

ippisite/ippidb/templates/index.html

@@ -74,7 +74,7 @@
 												</div>
 												<div class="flip-card-back">
 													<a href="/compounds">
-														<div style="top:20%; position:absolute;">
+														<div style="padding-top: 3.5em;">
 															<div class="choices_title">
 																Query
 															</div>
@@ -105,7 +105,7 @@
 												</div>
 												<div class="flip-card-back">
 													<a href="/about-pca">
-														<div style="top:20%; position:absolute;">
+														<div style="padding-top: 3.5em;">
 															<div class="choices_title">
 																Navigate the PPI chemical space
 															</div>
@@ -138,7 +138,7 @@
 												</div>
 												<div class="flip-card-back">
 													<a href="/about-le-lle">
-														<div style="top:20%; position:absolute;">
+														<div style="padding-top: 3.5em;">
 															<div class="choices_title">
 																Surf the efficiency plot
 															</div>
@@ -173,7 +173,7 @@
 												</div>
 												<div class="flip-card-back">
 													<a href="/contribute">
-														<div style="top:20%; position:absolute; ">
+														<div style="padding-top: 2.5em; ">
 															<div class="choices_title">
 																Contribute
 															</div>