Added hover animations to the home page and movie_analysis

Author: Varun-malviya5

Web_app/Home_Page.py

@@ -4,8 +4,23 @@
     page_title="Home Page",
     page_icon="👋",
 )
+# Adding custom CSS for hover effect
+st.markdown(
+    """
+    <style>
+    .hover-effect {
+        transition: transform 0.2s; /* Animation */
+    }
+    .hover-effect:hover {
+        transform: scale(1.05); /* Scale up the element */
+        color: #FFD700; /* Change color on hover */
+    }
+    </style>
+    """,
+    unsafe_allow_html=True
+)
 
-st.write("# Welcome to Movie Review Analysis and Recommendation System 👋")
+st.write("<h1 class='hover-effect'>Welcome to Movie Review Analysis and Recommendation System 👋</h1>", unsafe_allow_html=True)
 
 st.sidebar.success("Select above part.")
 

Web_app/pages/1_Movie_Analysis.py

@@ -33,6 +33,26 @@
     .line {
         margin: 20px 0;
     }
+    
+    /* Add hover effects */
+    .stButton:hover {
+        background-color: #FFD700;  /* Change background color on hover */
+        color: #fff;  /* Change text color on hover */
+        transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
+    }
+
+    .stFileUploader:hover {
+        border: 2px dashed #FFD700; /* Change border on hover */
+    }
+
+    /* Example for additional hover effects on specific elements */
+    .hover-effect {
+        transition: transform 0.3s ease;
+    }
+
+    .hover-effect:hover {
+        transform: scale(1.05); /* Scale up on hover */
+    }
     </style>
     """, unsafe_allow_html=True)