✨ Add View More button with smooth animation to project cards

- Replace link icons with 'View More' button
- Add smooth slide-up animation from bottom
- Improve hover effects with modern styling
- Perfect centering using absolute positioning
- Maintain original project card sizes

Author: YousefMohamd

css/style.css

@@ -726,3 +726,55 @@ nav.w3-sidebar .w3-bar-item:hover {
     visibility: visible !important;
   }
 }
+
+/* === View More Button - إضافة جديدة بدون تعديل الأصل === */
+.project-overlay {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  opacity: 0;
+  background: rgba(0, 0, 0, 0.6);
+  transition: all 0.4s ease;
+  z-index: 10;
+}
+
+.project-card:hover .project-overlay {
+  opacity: 1;
+}
+
+.view-more-btn {
+  position: absolute !important;
+  top: 50% !important;
+  left: 50% !important;
+  transform: translate(-50%, -50%) translateY(20px) !important;
+  display: block !important;
+  padding: 10px 24px;
+  background: transparent;
+  color: white;
+  text-decoration: none;
+  border: 1px solid white;
+  font-family: 'Helvetica Neue', 'Arial', sans-serif;
+  font-size: 12px;
+  font-weight: 300;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  transition: all 0.3s ease;
+  opacity: 0;
+  border-radius: 2px;
+  white-space: nowrap;
+  margin: 0 !important;
+}
+
+.project-card:hover .view-more-btn {
+  opacity: 1;
+  transform: translate(-50%, -50%) translateY(0) !important;
+}
+
+.view-more-btn:hover {
+  background: white;
+  color: #333;
+  transform: translate(-50%, -50%) translateY(-2px) !important;
+  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
+}