From 177969938a0bb230246deae22be3f0c639b18026 Mon Sep 17 00:00:00 2001
From: satatya <96868378+satatya@users.noreply.github.com>
Date: Thu, 17 Feb 2022 20:05:38 +0530
Subject: [PATCH 1/2] Update other_requisites.css

---
 CSS/other_requisites.css | 49 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/CSS/other_requisites.css b/CSS/other_requisites.css
index 3e2067d..bf4ccbb 100644
--- a/CSS/other_requisites.css
+++ b/CSS/other_requisites.css
@@ -184,6 +184,55 @@ div.desc {
   cursor: url(../Images/cursor.png), auto;
 }
 
+.img-wrapper {
+  position: relative;
+  overflow: hidden;
+}
+
+.img-wrapper > img {
+  display: block;
+  width: 100%;
+  aspect-ratio: 3 / 2;
+  object-fit: cover;
+  object-position: center;
+}
+
+.img-wrapper > .content {
+  position: absolute;
+  inset: 0;
+  font-size: 2rem;
+  padding: 1rem;
+  background: rgba(255, 255, 255, .4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.img-wrapper > img,
+.img-wrapper > .content {
+  transition: 200ms ease-in-out;
+}
+
+.img-wrapper:hover > img.blur {
+  filter: blur(5px);
+}
+
+.img-wrapper:hover > img.gray {
+  filter: grayscale(1);
+}
+
+.img-wrapper:hover > img.zoom {
+  transform: scale(1.1);
+}
+
+
+.img-wrapper > .content.slide-down {
+  transform: translateY(-100%);
+}
+.img-wrapper:hover > .content.slide-down {
+  transform: translateY(0);
+}
+
 #f1{
   background-color: lightgreen;
   font-weight: 500;

From 8b6ed3d3cad897a9def8bc893ce902d1ec4a9597 Mon Sep 17 00:00:00 2001
From: satatya <96868378+satatya@users.noreply.github.com>
Date: Thu, 17 Feb 2022 20:07:27 +0530
Subject: [PATCH 2/2] Update index.html

---
 HTML/index.html | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/HTML/index.html b/HTML/index.html
index a5a4d48..e76137c 100644
--- a/HTML/index.html
+++ b/HTML/index.html
@@ -84,7 +84,10 @@ <h1><br>
         <div class="responsive">
             <div class="gallery">
               <a target="_blank" href="#">
-                <img src="../Images/Rajasthan_Chittorgarh.jpg" width="600" height="400">
+                <div class="img-wrapper">
+                <img src="../Images/Rajasthan_Chittorgarh.jpg" alt="DESERT" width="600" height="400" class="blur">
+                <div class="content slide-down">View Package</div>
+              </div>
               </a>
               <div class="desc">Rajasthan is a glittering jewel of India, and we are here to make your trip to that jewel a fun and adventurous one!so hope you enjoy our Rajasthan package...</div>
             </div>
@@ -94,7 +97,10 @@ <h1><br>
           <div class="responsive">
             <div class="gallery">
               <a target="_blank" href="#">
-                <img src="../Images/Ladakh.jpg" alt="Forest" width="600" height="400">
+                <div class="img-wrapper">
+                <img src="../Images/Ladakh.jpg" alt="Forest" width="600" height="400" class="blur">
+                <div class="content slide-down">View Package</div>
+              </div>
               </a>
               <div class="desc">Explore untold destinations of leh ladakh with landscape of ladakh capturing your heart...</div>
             </div>
@@ -103,7 +109,10 @@ <h1><br>
           <div class="responsive">
             <div class="gallery">
               <a target="_blank" href="#">
-                <img src="../Images/Andaman.jpg" alt="Northern ISLANDS" width="600" height="400">
+                <div class="img-wrapper">
+                <img src="../Images/Andaman.jpg" alt="Northern ISLANDS" width="600" height="400" class="blur">
+                <div class="content slide-down">View Package</div>
+              </div>
               </a>
               <div class="desc">Are you an oceanholic?Love the blue waters and shades of palm tree on the beachside? Andaman's the answer for you...</div>
             </div>
@@ -112,7 +121,10 @@ <h1><br>
           <div class="responsive">
             <div class="gallery">
               <a target="_blank" href="#">
-                <img src="../Images/NK.jpeg" alt="CITY" width="600" height="400">
+                <div class="img-wrapper">
+                <img src="../Images/NK.jpeg" alt="CITY" width="600" height="400" class="blur"> 
+                <div class="content slide-down">View Package</div>
+              </div>
               </a>
               <div class="desc">Welcome to Pyongyang, Comrade...Hope You Enjoy Here...</div>
             </div>