add visual effect when hovering on map shortcuts

components/Ui/Map/Structures.vue

@@ -18,15 +18,21 @@
         lg="2"
         class="px-1"
       >
-        <div @click="setMapBounds(shortcut.bounds)">
+        <div
+          class="map-shortcut"
+          @click="setMapBounds(shortcut.bounds)"
+        >
           <v-img
             :src="shortcut.src"
             :alt="shortcut.alt"
             :title="shortcut.alt"
             width="85"
             height="85"
-            style="border: solid 1px #000;"
           />
+          <div class="map-shortcut-overlay">
+            <font-awesome-icon class="icon" icon="search-plus" />
+            <i class="fas fa-search-plus"></i>
+          </div>
         </div>
       </v-col>
     </v-row>
@@ -164,7 +170,7 @@ export default Vue.extend({
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
   #map {
     height: 100%;
     width: 100%;
@@ -180,4 +186,33 @@ export default Vue.extend({
   .map-shortcuts {
     padding: 12px 6px;
   }
+  .map-shortcut {
+    position: relative;
+    border: solid 1px #000;
+  }
+  .map-shortcut-overlay {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    width: 100%;
+    opacity: 0;
+    cursor: pointer;
+  }
+  .map-shortcut:hover .map-shortcut-overlay {
+    opacity: 0.5;
+  }
+  .map-shortcut-overlay>.icon {
+    color: #595959;
+    font-size: 46px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
 </style>