Img selectCC hover und pos gesetzt

uno/css/uno.css

@@ -88,3 +88,50 @@ body
     opacity: 0.3;
     transition: width ease-in-out 0.5s, opacity 0.5s;
 }
+
+.selectColor {
+    display: flex;
+    align-items: center;
+}
+
+.cc{
+    position: absolute;
+    width: 10vw;
+    z-index: 1000;
+}
+#cc-blue{
+    top: 20vw;
+    left: 50vw;
+    transition: top 0.5s, left 0.5s;
+}
+#cc-green{
+    top: 20vw;
+    right: 50vw;
+    transition: top 0.5s, right 0.5s;
+}
+#cc-yellow{
+    top: 10vw;
+    right: 50vw;
+    transition: top 0.5s, right 0.5s;
+}
+#cc-red{
+    top: 10vw;
+    left: 50vw;
+    transition: top 0.5s, left 0.5s;
+}
+#cc-blue:hover{
+    top: calc(20vw + 15px);
+    left: calc(50vw + 15px);
+}
+#cc-red:hover{
+    top: calc(10vw - 15px);
+    left: calc(50vw + 15px);
+}
+#cc-yellow:hover{
+    top: calc(10vw - 15px);
+    right: calc(50vw + 15px);
+}
+#cc-green:hover{
+    top: calc(20vw + 15px);
+    right: calc(50vw + 15px);
+}

uno/index.html

@@ -13,7 +13,10 @@
 
     <div class="selectColor">
 
-
+        <img class="cc" id="cc-blue" src="./img/selectColor/BLUE.png">
+        <img class="cc" id="cc-red" src="./img/selectColor/RED.png">
+        <img class="cc" id="cc-green" src="./img/selectColor/GREEN.png">
+        <img class="cc" id="cc-yellow" src="./img/selectColor/YELLOW.png">
 
     </div>