Updated allTrails css with animations and different image styles for trail list

src/main/resources/static/css/allTrails.css

@@ -14,22 +14,39 @@
 }
 
 .listA{
+    display: flex;
     flex: 1 1;
-    background-color: black;
-    color: white;
-    padding: 10px;
-
+    padding: 15px;
+    transition: background-color 0.5s ease-out 100ms;
+    border-radius: 20px;
 }
 .listA:hover{
-    background-color: #656565;
-    color: white;
-
+    /*background-color: #656565;*/
+}
+.trailsImages {
+    flex: 1 1;
+    width: 150px;
+    border-radius: 20px;
+    transition: 0.5s ease-out 100ms;
 }
+.trailsImages:hover {
+    box-shadow: 0 0 30px #bbbb00;
+    transform: scale(1.2,1.2);
+}
+
 .selected {
-    color: red;
+    box-shadow: 0 0 30px yellow;
 }
 
 .trailInfoBox {
-    /*opacity: 0;*/
+    animation: fadeIn 3s;
+}
+@keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+@keyframes fadeGrey {
+    0% {}
+    100% { background-color: #656565 }
 }