From 88a67ded8c2926897f26fec50a4f89608392a181 Mon Sep 17 00:00:00 2001
From: Hishita Gupta <159264060+HishitaGupta@users.noreply.github.com>
Date: Mon, 1 Jul 2024 14:33:18 +0530
Subject: [PATCH] added #d parallax tilty effect

---
 index.html |  8 +++++---
 tilt.css   | 11 +++++++++++
 tilt.js    |  8 ++++++++
 3 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 tilt.css
 create mode 100644 tilt.js

diff --git a/index.html b/index.html
index a4193583..6f4a3880 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,8 @@
   <title>Tourguide</title>
   <!-- adding a fav-icon -->
   <link rel="icon" type="image/x-icon" href="favicon.ico"/>
+  <link rel="stylesheet" href="tilt.css">
+  <script src="tilt.js"></script>
 
   <script src="index.js" defer></script>
   <script src="mouseEffect.js"></script>
@@ -531,7 +533,7 @@ <h2 class="section__title">Best trip packages</h2>
           Top trip deals curated for you. Get the best package for your adventure and save more.
         </p>
         <div class="trip__grid">
-          <div class="trip__card">
+          <div class="trip__card cardd tilt-effect">
             <img src="https://i.ibb.co/60nvYwQ/Screenshot-2023-07-14-173347.png" alt="trip" height="250" width="45" />
             <div class="trip__details">
               <p>Santorini, Aegean Sea</p>
@@ -544,7 +546,7 @@ <h2 class="section__title">Best trip packages</h2>
               </div>
             </div>
           </div>
-          <div class="trip__card">
+          <div class="trip__card cardd tilt-effect">
             <img src="https://i.ibb.co/h1WgH8B/Screenshot-2023-07-14-173807.png" alt="trip" height="250" width="45" />
             <div class="trip__details">
               <p>Machu Picchu, Peru</p>
@@ -557,7 +559,7 @@ <h2 class="section__title">Best trip packages</h2>
               </div>
             </div>
           </div>
-          <div class="trip__card">
+          <div class="trip__card cardd tilt-effect">
             <img src="https://i.ibb.co/vc2W0wN/Screenshot-2023-07-14-174151.png" alt="trip" height="250" width="45" />
             <div class="trip__details">
               <p>Grand Canyon National Park, Arizona</p>
diff --git a/tilt.css b/tilt.css
new file mode 100644
index 00000000..5a623e25
--- /dev/null
+++ b/tilt.css
@@ -0,0 +1,11 @@
+.tilt-effect:hover {
+    transform: rotate3d(1, 1, 0, 20deg); /* Increased angle for more tilt */
+    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect and shadow */
+    box-shadow: 10px 10px 30px rgba(0,0,0,0.5); /* Shadow for depth */
+  }
+  
+  .tilt-effect {
+    transform: rotate3d(1, 1, 0, 0deg); /* Element returns to normal on hover */
+    box-shadow: 5px 5px 5px rgba(0,0,0,0.5); /* Shadow disappears on hover */
+  }
+  
\ No newline at end of file
diff --git a/tilt.js b/tilt.js
new file mode 100644
index 00000000..ab07e541
--- /dev/null
+++ b/tilt.js
@@ -0,0 +1,8 @@
+$('.cardd').tilt({
+    maxTilt: 10,
+    perspective: 1500, // Adjust the perspective if needed
+    scale: 1.15, // Element scales up slightly on hover
+    speed: 300, // Speed of the enter/exit transition
+    transition: true,
+  });
+  
\ No newline at end of file