Added hover effect on images, explore css & js file updated

explore.css

@@ -35,9 +35,22 @@
     position: relative;
     transition: flex 0.7s ease-in;
     display: flex;
-    flex-direction: column;
+    flex-direction: column; 
   }
 
+  /* .card:hover {
+      flex: 3;
+  }
+
+  .card:hover h3, .card:hover p {
+      opacity: 1;
+      transition: opacity 0.5s ease-in 0.8s;
+  }
+
+  .card:hover .info {
+      visibility: visible;
+  } */
+
   .info {
     position: absolute;
     bottom: 20px;
@@ -71,22 +84,15 @@
     flex: 3;
   }
 
-  .card.active h3 {
-    opacity: 1;
-    transition: opacity 0.5s ease-in 0.8s;
-  }
-
-  .card.active p {
+  .card.active h3, .card.active p {
     opacity: 1;
     transition: opacity 0.5s ease-in 0.8s;
   }
 
   .card.active .info {
     visibility: visible;
   }
-  .hedd{
-    font-size: 25px;
-  }
+
   @media (max-width: 1300px) {
     .containers {
       display: flex;

explore.js

@@ -1,14 +1,28 @@
+let lastClickedCard = document.querySelector(".active");
+
+// Function to handle click events
+function handleClick(card) {
+  // Remove active classes from all cards
+  const panels = document.querySelectorAll(".card");
+  panels.forEach(panel => panel.classList.remove("active"));
+
+  // Add active class to the clicked card
+  card.classList.add("active");
+  lastClickedCard = card; // Update the reference to the last clicked card
+}
+
+// Attach click event listener to all cards
 const panels = document.querySelectorAll(".card");
+panels.forEach(panel => panel.addEventListener("click", () => handleClick(panel)));
 
-panels.forEach((card) => {
-  card.addEventListener("click", () => {
-    removeActiveClasses(); // Add fuctions to remove active class first
-    card.classList.add("active");
+// Adjust the mouseover event listener
+panels.forEach(panel => {
+  panel.addEventListener('mouseover', () => {
+      lastClickedCard.classList.remove("active");
+      panel.classList.add('active');
   });
+  panel.addEventListener('mouseout', () => {
+    panel.classList.remove('active');
+    lastClickedCard.classList.add("active");
+});
 });
-
-function removeActiveClasses() {
-  panels.forEach((card) => {
-    card.classList.remove("active");
-  });
-}

index.html

@@ -548,7 +548,7 @@ <h2 class="section__title" data-aos="fade-in"><span style="margin-left: 300px;">
 
           <div class="card active" style="
             background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
-              url('/img/paris.jpg')
+              url('./img/paris.jpg')
           ">
           <div class="info">