frontend: fix placement of img

SafeHavenMaps · Jun 22, 2024 · dd868f0 · dd868f0
1 parent 6e789dc
commit dd868f0
Showing 1 changed file with 5 additions and 4 deletions.
diff --git a/frontend/components/viewer/map/Marker.vue b/frontend/components/viewer/map/Marker.vue
@@ -1,11 +1,11 @@
 <template>
   <img
     :class="{ highlighted: props.highlighted }"
-    class="map-marker"
     :width="props.width"
     :height="props.height"
     :src="`/api/icons/pin/${props.categoryId}?h=${props.height}&w=${props.width}`"
     style="cursor: pointer"
+    class="map-marker"
     @click="handleClick"
   >
 </template>
@@ -31,19 +31,20 @@ const handleClick = () => {
 <style scoped>
 .map-marker {
   transition: transform 0.2s, filter 0.2s;
+  transform: translateX(-50%) translateY(-100%);
 }
 
 .map-marker.highlighted {
-  transform: scale(1.2);
+  transform: translateX(-50%) translateY(-100%) scale(1.25);
   animation: bounce 0.75s infinite alternate;
 }
 
 @keyframes bounce {
   0% {
-    transform: translateY(0) scale(1.2);
+    transform: translateY(-100%) scale(1.25) translateX(-50%);
   }
   100% {
-    transform: translateY(-10px) scale(1.2);
+    transform: translateY(-150%) scale(1.25) translateX(-50%);
   }
 }
 </style>