automated maps and overlays in js

2016-11-23 19:59:51 +01:00
parent 6850fa4d50
commit 5a3252b93b
7 changed files with 317 additions and 56 deletions
@@ -18,12 +18,29 @@ html, body {
    float: right;
    background-position: left; }
  #main .page {
-    background-color: green;
+    position: relative;
    width: 227.41mm;
    height: 207.26mm;
    background-repeat: no-repeat;
    background-size: contain; }
-    #main .page .inner {
+    #main .page .overlay {
+      position: relative;
      width: 100%;
      height: 100%;
-      border: 1px solid blue; }
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      z-index: 1; }
+    #main .page .maps {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 2; }
+      #main .page .maps .map {
+        position: absolute;
+        background-color: rgba(50, 50, 50, 0.8);
+        cursor: pointer; }
+    #main .page.page-6 .overlay {
+      background-image: url("../../images/vectos/04_chance-RB.svg"); }