add imgs

index.css

@@ -113,6 +113,15 @@
     opacity: 1;
     transition: opacity 0.2s 0.4s;
 }
+#P3box:hover #P3imgBox {
+    margin-top: 0rem;
+    z-index: 1;
+    transition: margin-top 0.5s, z-index 0s 0.5s;
+}
+#P3box:hover #P3img {
+    opacity: 1;
+    transition: opacity 0.2s 0.4s;
+}
 #P2box:hover #P2imgBox {
     margin-top: 0rem;
     z-index: 1;
@@ -122,6 +131,15 @@
     opacity: 1;
     transition: opacity 0.2s 0.4s;
 }
+#P1box:hover #P1imgBox {
+    margin-top: 0rem;
+    z-index: 1;
+    transition: margin-top 0.5s, z-index 0s 0.5s;
+}
+#P1box:hover #P1img {
+    opacity: 1;
+    transition: opacity 0.2s 0.4s;
+}
 #moments {
     font-size: 1.5rem;
     color: rgba(255, 255, 255, 0.4);

index.html

@@ -51,6 +51,11 @@
         <span class="title hoverable">P003 Pneumatic-leg-exoskeleton [ongoing]</span></br>
         Creating pneumatic exoskeletons to enhance human strength and endurance, using pressure sensors to detect movement trends, and using pneumatic kits to perform movements.</br>
         [hardware] [open source]</br>
+
+        <div class="PimgBox" id="P3imgBox">
+          <img class="Pimg" id="P3img" src="image\project\P003-1.png" alt="P003-1">
+          <img class="Pimg" id="P3img" src="image\project\P003-2.png" alt="P003-2">
+        </div>
       </div>
 
       <div class="Pbox" id="P2box">
@@ -69,6 +74,11 @@
         <span class="title hoverable">P001 Liang4793.github.io [finished]</span></br>
         Liáng4793's Repository (main website). Redefine the world with imagination!</br>
         [software, mainly wrote with JavaScript, HTML and CSS] [open source]</br>
+
+        <div class="PimgBox" id="P1imgBox">
+          <img class="Pimg" id="P1img" src="image\project\P001-1.svg" alt="P001-1">
+          <img class="Pimg" id="P1img" src="image\project\P001-2.svg" alt="P001-2">
+        </div>
       </div>
     </div>