Deleting and adding Image

components/03_Organisms/imageGrid/_imageGrid.scss

@@ -6,6 +6,26 @@
     &__Item {
 		position: relative;
 		@include RV-ContentCrop;
+
+		&--add {
+			.LP-Link {
+				width: 100%;
+				height: 100%;
+				position: relative;	
+				display: block;
+				background: $-almost-white;
+
+				.LP-Icon {
+					width: $-spacing-large;
+					height: $-spacing-large;
+
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+				}
+			}
+		}
 	}
 
 	&__DeleteItem {
@@ -20,17 +40,15 @@
 		height: $-spacing-large;
 		width: $-spacing-large;
 
-		line-height: $-spacing-large;
-		vertical-align: middle;
-
-		.LP-Icon{
-			height: $-spacing-medium;
-			width: $-spacing-medium;
+		.LP-Link .LP-Icon{
+			height: #{$-spacing-small * 2};
+			width: #{$-spacing-small * 2};
 			position:relative;
-			top: calc(50% - 18.75px);
+			left: #{($-spacing-large - $-spacing-small) / 3};
+			top: #{($-spacing-large - $-spacing-small) / 3};
 		}
 	}
-	&__Item:hover &__DeleteItem {
+	&__Item>.LP-Link:hover + &__DeleteItem, &__DeleteItem:hover {
 		visibility: visible;
 	}
 }

components/03_Organisms/imageGrid/imageGrid.hbs

@@ -3,8 +3,20 @@
     <ul class="LP-ImageGrid__Container">
         {{#each images}}
         <li class="LP-ImageGrid__Item">
-            <a href="#" class="LP-Link"><img  class="LP-Image" src="{{this}}"></a>
+            <a href="#" class="LP-Link">
+                <img  class="LP-Image" src="{{this}}">
+            </a>
+            <span class="LP-ImageGrid__DeleteItem" title="Bild löschen">
+                <a href="#" class="LP-Link">
+                    <img class="LP-Icon" src="/icons/cancel.svg"/>
+                </a>
+            </span>
         </li>
         {{/each}}
+        <li class="LP-ImageGrid__Item LP-ImageGrid__Item--add" title="Bild hinzufügen">
+            <a class="LP-Link" href="#">
+                <img class="LP-Icon" src="/icons/plus.svg"/>
+            </a>
+        </li>
     </ul>
 </div>