overlaping front and back of a tile

frontend/src/components/Tile.vue

 <template>
-  <div class="hello">
-        <h1>{{ id }}</h1>
+<div>
   <button class="tile-symbol">
-    <img :src="this.background" :width="this.width" :height="this.height"/>
-    <img :src="this.svg" :width="this.width" :height="this.height"/>
+    <img class="tile-background" :src="this.background" :width="this.width" :height="this.height"/>
+    <img class="tile-front" :src="this.svg" :width="this.width" :height="this.height"/>
   </button>
   </div>
 </template>
@@ -39,4 +38,13 @@ export default {
     background: transparent;
     border: none;
 }
+.tile-background{
+  position: relative;
+  top: 0;
+  left: 0;
+}
+.tile-front{
+  position: relative;
+  transform: translateX(-100%);   
+}
 </style>